/**
 * Skeleton — Loading placeholder
 * Generated by Traqr Init ({{DESIGN_FLAVOR}} flavor). Edit freely.
 *
 * Usage:
 *   <Skeleton className="h-4 w-48" />
 *   <Skeleton className="h-32 w-full" variant="card" />
 */

interface SkeletonProps {
  className?: string
  variant?: 'text' | 'card' | 'avatar' | 'button'
}

const variantClasses: Record<NonNullable<SkeletonProps['variant']>, string> = {
  text: 'h-4 w-48 {{DESIGN_RADIUS_SM}}',
  card: 'h-32 w-full {{DESIGN_RADIUS_CARD}}',
  avatar: 'h-10 w-10 rounded-full',
  button: 'h-9 w-24 {{DESIGN_RADIUS_MD}}',
}

export function Skeleton({ className = '', variant = 'text' }: SkeletonProps) {
  return (
    <div
      className={`design-shimmer ${variantClasses[variant]} ${className}`}
      role="status"
      aria-label="Loading..."
    />
  )
}

/**
 * SkeletonGroup — Multiple skeleton lines
 */
export function SkeletonGroup({ lines = 3, className = '' }: { lines?: number; className?: string }) {
  return (
    <div className={`space-y-3 ${className}`}>
      {Array.from({ length: lines }).map((_, i) => (
        <Skeleton
          key={i}
          className={i === lines - 1 ? 'w-2/3' : 'w-full'}
        />
      ))}
    </div>
  )
}