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

type SkeletonVariant = "text" | "circular" | "rectangular" | "card"

interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: SkeletonVariant
  width?: string | number
  height?: string | number
  lines?: number
}

const variantStyles: Record<SkeletonVariant, string> = {
  text: "h-4 w-full rounded",
  circular: "rounded-full",
  rectangular: "rounded-lg",
  card: "rounded-xl",
}

function Skeleton({ className, variant = "text", width, height, lines = 1, style, ...props }: SkeletonProps) {
  if (variant === "text" && lines > 1) {
    return (
      <div className={cn("space-y-2", className)} style={style} {...props}>
        {Array.from({ length: lines }).map((_, i) => (
          <div
            key={i}
            className={cn(
              "animate-pulse bg-gray-200",
              variantStyles[variant],
              i === lines - 1 && "w-3/4"
            )}
            style={{ width: i === lines - 1 ? undefined : width, height }}
          />
        ))}
      </div>
    )
  }

  return (
    <div
      className={cn(
        "animate-pulse bg-gray-200",
        variantStyles[variant],
        className
      )}
      style={{ width, height, ...style }}
      {...props}
    />
  )
}

interface SkeletonCardProps {
  className?: string
}

function SkeletonCard({ className }: SkeletonCardProps) {
  return (
    <div className={cn("rounded-xl border border-gray-200 bg-white p-6 shadow-sm", className)}>
      <div className="space-y-4">
        <Skeleton variant="rectangular" className="h-48 w-full" />
        <div className="space-y-2">
          <Skeleton variant="text" className="h-5 w-3/4" />
          <Skeleton variant="text" lines={3} />
        </div>
        <div className="flex items-center gap-3">
          <Skeleton variant="circular" className="h-8 w-8" />
          <Skeleton variant="text" className="h-4 w-24" />
        </div>
      </div>
    </div>
  )
}

export { Skeleton, SkeletonCard }
export type { SkeletonProps, SkeletonCardProps }