import { cn } from '../utils/cn'

interface SkeletonProps {
  className?: string
  width?: string
  height?: string
  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
}

export function Skeleton({
  className,
  width = '100%',
  height = '1rem',
  rounded = 'md',
}: SkeletonProps) {
  const roundedClasses = {
    none: 'rounded-none',
    sm: 'rounded-sm',
    md: 'rounded-md',
    lg: 'rounded-lg',
    full: 'rounded-full',
  }

  return (
    <div
      className={cn(
        'animate-pulse bg-gray-200 dark:bg-gray-700',
        roundedClasses[rounded],
        className
      )}
      style={{ width, height }}
    />
  )
}

// Skeleton variants for common use cases
export function SkeletonText({ lines = 3 }: { lines?: number }) {
  return (
    <div className="space-y-2">
      {Array.from({ length: lines }).map((_, i) => (
        <Skeleton key={i} height="0.875rem" width={i === lines - 1 ? '60%' : '100%'} />
      ))}
    </div>
  )
}

export function SkeletonCard() {
  return (
    <div className="card p-4 space-y-4">
      <Skeleton height="12rem" rounded="lg" />
      <Skeleton height="1.5rem" width="70%" />
      <SkeletonText lines={2} />
    </div>
  )
}

export function SkeletonAvatar({ size = '3rem' }: { size?: string }) {
  return <Skeleton width={size} height={size} rounded="full" />
}
