import { AnimatePresence, motion } from 'framer-motion';
import { CardUIType } from '@/types/car-card.type';
import { CarCard } from '@/features/vehicles/CarCard';
interface ModelsGridDesktopProps {
  currentOption: string;
  cars: CardUIType[];
}

export const ModelsGridDesktop = ({ currentOption, cars }: ModelsGridDesktopProps) => {
  return (
    <AnimatePresence mode="wait">
      <motion.ul
        key={currentOption}
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        transition={{ duration: 0.3, ease: 'easeInOut' }}
        className="show-on-desktop mt-12 grid min-h-131.25 w-full items-center justify-center gap-5 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
      >
        {cars.map((car, i) => (
          <motion.li
            key={i}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.2 }}
            className="mx-0"
          >
            <CarCard car={car} />
          </motion.li>
        ))}
      </motion.ul>
    </AnimatePresence>
  );
};