import { cn } from '../../lib/utils';

interface SkeletonProps {
  className?: string;
}

export function Skeleton({ className }: SkeletonProps) {
  return (
    <div
      className={cn('animate-pulse rounded bg-slate-700/60', className)}
      aria-hidden="true"
    />
  );
}

export function RackSkeleton() {
  return (
    <div className="flex gap-4 p-4">
      {[1, 2].map((i) => (
        <div key={i} className="w-48 flex flex-col gap-1">
          <Skeleton className="h-6 w-full mb-2" />
          {Array.from({ length: 12 }).map((_, j) => (
            <Skeleton key={j} className="h-7 w-full" />
          ))}
        </div>
      ))}
    </div>
  );
}