import { cn } from './cva'

export interface SkeletonProps {
  variant?: 'heading' | 'block' | 'text' | 'circle'
  className?: string
}

const variantClasses = {
  heading: 'h-8 w-3/5 rounded',
  block: 'h-48 w-full rounded',
  text: 'h-4 w-full rounded',
  circle: 'h-8 w-8 rounded-full',
} as const

export function Skeleton({ variant = 'text', className }: SkeletonProps) {
  return (
    <div
      role="presentation"
      aria-hidden="true"
      className={cn('animate-pulse bg-surface', variantClasses[variant], className)}
    />
  )
}