import type { ComponentProps } from 'react';
import { cn } from '@/lib/utils';

type SkeletonVariant = 'line' | 'circle' | 'card' | 'button' | 'input';

function Skeleton({
  className,
  variant = 'line',
  ref,
  ...props
}: ComponentProps<'div'> & { variant?: SkeletonVariant }) {
  const variants: Record<SkeletonVariant, string> = {
    line: 'h-4 w-full rounded-md',
    circle: 'h-10 w-10 rounded-full',
    card: 'h-24 w-full rounded-xl',
    button: 'h-9 w-24 rounded-md',
    input: 'h-9 w-full rounded-md',
  };

  return (
    <div
      ref={ref}
      className={cn('animate-pulse bg-muted', variants[variant], className)}
      {...props}
    />
  );
}

export { Skeleton };
