'use client';

import { CarCard } from '@/features/vehicles/CarCard';
import { useScreenSize } from '@/hooks/useScreenSize';
import { getRecomendations } from '@/services/getRecomendations.service';
import { CardUIType } from '@/types/car-card.type';

interface RecomendationsProps {
  carCollection: CardUIType[];
  currentID: number;
}
export const Recomendations = ({ carCollection, currentID }: RecomendationsProps) => {
  const recomendedCars = getRecomendations(carCollection, currentID);
  const { isDesktop, isMobile } = useScreenSize();

  const carsToShow = isDesktop ? 4 : isMobile ? 1 : 3;

  return recomendedCars.length > 0 ? (
    <section className="mb-10">
      <h3 className="title-h3 text-text-secondary my-10 text-center">MÁS DE NUESTRA COLECCIÓN</h3>
      <div className="flex w-full items-center justify-center gap-3">
        {recomendedCars.slice(0, carsToShow).map((vehicle, i) => (
          <CarCard car={vehicle} key={i} />
        ))}
      </div>
    </section>
  ) : (
    <></>
  );
};