import type { CatalogueViewMode } from '@/types/catalogue';
import { cn } from '@/utils/classNames';
import { Skeleton, SkeletonText } from '@/components/ui/Skeleton';

export interface MachineGridSkeletonProps {
  readonly count?: number;
  readonly viewMode?: CatalogueViewMode;
}

export function MachineGridSkeleton({
  count = 12,
  viewMode = 'comfortable'
}: MachineGridSkeletonProps) {
  return (
    <div
      role="status"
      aria-label="Loading machine catalogue"
      className={cn(
        'grid gap-4 sm:gap-5',
        viewMode === 'compact'
          ? 'grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4'
          : 'grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4',
      )}
    >
      <span className="sr-only">Loading machine catalogue…</span>
      {Array.from({ length: count }, (_, index) => (
        <div
          key={index}
          className={cn(
            'rounded-3xl border border-border/70 bg-panel/70 p-4 shadow-panel',
            viewMode === 'compact' ? 'min-h-[280px]' : 'min-h-[420px]',
          )}
        >
          <Skeleton className={viewMode === 'compact' ? 'h-36' : 'h-48'} rounded="xl" />
          <div className="mt-5 flex gap-2">
            <Skeleton className="h-6 w-20" rounded="full" />
            <Skeleton className="h-6 w-24" rounded="full" />
          </div>
          <Skeleton className="mt-5 h-7 w-3/4" rounded="md" />
          <Skeleton className="mt-3 h-4 w-1/2" rounded="full" />
          <SkeletonText className="mt-5" lines={3} />
          <div className="mt-5 grid grid-cols-3 gap-2">
            <Skeleton className="h-16" rounded="lg" />
            <Skeleton className="h-16" rounded="lg" />
            <Skeleton className="h-16" rounded="lg" />
          </div>
        </div>
      ))}
    </div>
  );
}