BillTracker/client/components/ui/Skeleton.tsx

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 };