const pulse = 'animate-pulse rounded-lg bg-white/[0.05]';

export function SkeletonLine({ className = '' }: { className?: string }) {
  return <div className={`${pulse} h-4 w-full ${className}`} />;
}

export function SkeletonCard({ className = '' }: { className?: string }) {
  return <div className={`${pulse} h-32 w-full ${className}`} />;
}

export function SkeletonTable({ rows = 5, cols = 4, className = '' }: { rows?: number; cols?: number; className?: string }) {
  return (
    <div className={`space-y-2 ${className}`}>
      {Array.from({ length: rows }, (_, r) => (
        <div key={r} className="flex gap-4">
          {Array.from({ length: cols }, (_, c) => (
            <div key={c} className={`${pulse} h-6 flex-1`} />
          ))}
        </div>
      ))}
    </div>
  );
}