'use client';

import { useCardGrid } from '@/hooks/useCardGrid';
import { OurModelGrid } from './OurModelGrid';
import { OurModelSelector } from './OurModelSelector';
import { CardUIType } from '@/types/car-card.type';

interface Props {
  cars: CardUIType[];
}

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

  return (
    <>
      <h2 className="show-on-desktop title-h2 my-12 text-center font-light">NUESTROS MODELOS</h2>
      <OurModelSelector options={options} onChange={setCurrentOption} value={currentOption} />
      <OurModelGrid currentOption={currentOption} cars={filteredCars} />
    </>
  );
};