honeyDueWeb/src/components/shared/loading-skeleton.tsx

import { Skeleton } from "@/components/ui/skeleton";

interface LoadingSkeletonProps {
  variant: "card-grid" | "list" | "detail" | "kanban";
  count?: number;
}

export function LoadingSkeleton({ variant, count = 4 }: LoadingSkeletonProps) {
  if (variant === "card-grid") {
    return (
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {Array.from({ length: count }).map((_, i) => (
          <div key={i} className="rounded-2xl border bg-card p-5 space-y-3">
            <Skeleton className="h-5 w-3/4 rounded-lg" />
            <Skeleton className="h-4 w-1/2 rounded-lg" />
            <div className="flex gap-2 pt-2"><Skeleton className="h-6 w-16 rounded-full" /><Skeleton className="h-6 w-16 rounded-full" /></div>
          </div>
        ))}
      </div>
    );
  }
  if (variant === "list") {
    return (
      <div className="space-y-3">
        {Array.from({ length: count }).map((_, i) => (
          <div key={i} className="flex items-center gap-4 rounded-2xl border bg-card p-4">
            <Skeleton className="size-10 rounded-xl" />
            <div className="flex-1 space-y-2"><Skeleton className="h-4 w-1/3 rounded-lg" /><Skeleton className="h-3 w-1/2 rounded-lg" /></div>
            <Skeleton className="h-8 w-20 rounded-lg" />
          </div>
        ))}
      </div>
    );
  }
  if (variant === "detail") {
    return (
      <div className="space-y-6">
        <Skeleton className="h-8 w-1/3 rounded-lg" />
        <div className="grid grid-cols-2 gap-4">
          {Array.from({ length: 6 }).map((_, i) => (
            <div key={i} className="space-y-2"><Skeleton className="h-3 w-20 rounded-lg" /><Skeleton className="h-5 w-full rounded-lg" /></div>
          ))}
        </div>
      </div>
    );
  }
  return (
    <div className="flex gap-4 overflow-x-auto pb-4">
      {Array.from({ length: count }).map((_, i) => (
        <div key={i} className="min-w-[280px] rounded-2xl border bg-card p-4 space-y-3">
          <Skeleton className="h-5 w-24 rounded-lg" /><Skeleton className="h-24 w-full rounded-xl" /><Skeleton className="h-24 w-full rounded-xl" />
        </div>
      ))}
    </div>
  );
}