import * as React from "react"
import { cn } from "@/lib/utils"

/**
 * Reusable Skeleton component for loading states
 * Provides a shimmer animation effect for placeholder content
 */
const Skeleton = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("animate-pulse rounded-md bg-muted/50", className)} {...props} />
  ),
)
Skeleton.displayName = "Skeleton"

/**
 * Shimmer effect skeleton with gradient animation
 * Provides a more dynamic loading appearance
 */
const SkeletonShimmer = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(
        "relative overflow-hidden rounded-md bg-muted/50",
        "before:absolute before:inset-0",
        "before:-translate-x-full before:animate-shimmer",
        "before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent",
        className,
      )}
      {...props}
    />
  ),
)
SkeletonShimmer.displayName = "SkeletonShimmer"

export { Skeleton, SkeletonShimmer }
