import { cn } from "@/lib/utils";

interface Props { className?: string }

export function Skeleton({ className }: Props) {
  return <div className={cn("animate-pulse bg-slate-200 rounded", className)} />;
}

export function SkeletonCard() {
  return (
    <div className="bg-white rounded-lg border border-slate-200/60 shadow-card px-5 py-4 space-y-3">
      <Skeleton className="h-3 w-20" />
      <Skeleton className="h-7 w-32" />
      <Skeleton className="h-3 w-16" />
    </div>
  );
}

export function SkeletonTable({ rows = 5 }: { rows?: number }) {
  return (
    <div className="bg-white rounded-lg border border-slate-200/60 shadow-card overflow-hidden">
      <div className="px-5 py-3 border-b border-slate-100"><Skeleton className="h-3 w-40" /></div>
      {Array.from({ length: rows }).map((_, i) => (
        <div key={i} className="px-5 py-3 border-b border-slate-50 flex items-center gap-4">
          <Skeleton className="h-3 w-1/3" />
          <Skeleton className="h-3 w-16 ml-auto" />
          <Skeleton className="h-3 w-12" />
        </div>
      ))}
    </div>
  );
}
