Skeleton Loader Component

interface SkeletonProps {
  width?: string | number;
  height?: string | number;
  variant?: 'text' | 'circle' | 'rect';
  className?: string;
}

export function Skeleton({ width = '100%', height = 20, variant = 'text', className = '' }: SkeletonProps) {
  const baseClass = 'animate-pulse bg-gray-700';
  const variantClass = {
    text: 'rounded',
    circle: 'rounded-full',
    rect: 'rounded-lg',
  }[variant];

  return (
    <div
      className={`${baseClass} ${variantClass} ${className}`}
      style={{ width, height }}
      role="status"
      aria-label="Loading"
    />
  );
}

export function SkeletonCard() {
  return (
    <div className="space-y-3 p-4">
      <Skeleton variant="rect" height={200} />
      <Skeleton width="60%" />
      <Skeleton width="80%" />
      <Skeleton width="40%" />
    </div>
  );
}