import { AnimatePresence, motion } from 'framer-motion';

import { MachineCard } from '@/components/catalogue/MachineCard';
import type { CatalogueViewMode, MachineRegistryItem } from '@/types/catalogue';
import { cn } from '@/utils/classNames';

export interface MachineGridProps {
  readonly machines: readonly MachineRegistryItem[];
  readonly favouriteSlugs: readonly string[];
  readonly onToggleFavourite: (slug: string) => void;
  readonly viewMode: CatalogueViewMode;
  readonly ariaLabel?: string;
}

export function MachineGrid({
  ariaLabel = 'Machine catalogue results',
  favouriteSlugs,
  machines,
  onToggleFavourite,
  viewMode
}: MachineGridProps) {
  const favourites = new Set(favouriteSlugs);

  return (
    <motion.div
      layout
      role="list"
      aria-label={ariaLabel}
      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',
      )}
    >
      <AnimatePresence initial={false}>
        {machines.map((machine) => (
          <motion.div
            key={machine.slug}
            role="listitem"
            layout
            initial={{ opacity: 0, y: 12, scale: 0.98 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 8, scale: 0.98 }}
            transition={{ duration: 0.18, ease: 'easeOut' }}
          >
            <MachineCard
              machine={machine}
              isFavourite={favourites.has(machine.slug)}
              onToggleFavourite={onToggleFavourite}
              viewMode={viewMode}
            />
          </motion.div>
        ))}
      </AnimatePresence>
    </motion.div>
  );
}