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

// Deterministic keys avoid hydration mismatch & SSR issues.
const FILTER_SKELETON_KEYS = ["filter-0", "filter-1", "filter-2", "filter-3"];
const generateWorkSkeletonKeys = (count: number) =>
  Array.from({ length: count }, (_, i) => `work-${i}`);

interface AuthorWorksSkeletonProps {
  count?: number;
  className?: string;
}

export function AuthorWorksSkeleton({
  count = 5,
  className,
}: AuthorWorksSkeletonProps) {
  return (
    <div className={className}>
      <div className="space-y-6">
        <div className="bg-navy/5 dark:bg-navy/10 p-4 rounded-lg">
          <div className="flex flex-col sm:flex-row justify-between gap-4">
            <div className="flex items-center gap-3 flex-wrap">
              {FILTER_SKELETON_KEYS.map((k) => (
                <Skeleton key={k} className="h-9 w-32" />
              ))}
            </div>
            <div className="flex items-center gap-2">
              <Skeleton className="h-4 w-8" />
              <Skeleton className="h-9 w-9" />
              <Skeleton className="h-9 w-9" />
            </div>
          </div>
        </div>
        <div className="space-y-4">
          {generateWorkSkeletonKeys(count).map((k) => (
            <Skeleton key={k} className="h-40" />
          ))}
        </div>
      </div>
    </div>
  );
}
