'use client';

import { CarCard } from '@/features/vehicles/CarCard';
import { FilterButton } from '@/components/ui';
import { useCardGrid } from '@/hooks/useCardGrid';
import type { CardUIType } from '@/types/car-card.type';
import { AnimatePresence, motion } from 'framer-motion';

interface Props {
  cars: CardUIType[];
}

export const VehiclesSection = ({ cars }: Props) => {
  const { options, currentOption, setCurrentOption, filteredCars } = useCardGrid(cars);

  return (
    <section className="min-w-80 md:min-w-155 lg:min-w-235 xl:min-w-315">
      <div className="flex flex-wrap items-center gap-4">
        {options.map((s) => (
          <FilterButton
            key={s.value}
            isSelected={s.value === currentOption}
            selectFilter={setCurrentOption}
            filter={s}
          />
        ))}
      </div>
      <AnimatePresence mode="wait">
        <motion.ul
          key={currentOption}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.3, ease: 'easeInOut' }}
          className="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"
        >
          {filteredCars.map((vehicle, i) => (
            <motion.li
              key={i}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.2 }}
              className="mx-0"
            >
              <CarCard car={vehicle} />
            </motion.li>
          ))}
          <motion.li
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.2 }}
          ></motion.li>
        </motion.ul>
      </AnimatePresence>
    </section>
  );
};