import type { Car } from '@/types/detailed-car.types';
import { SliderGallery } from './SliderGallery';
import { HighlightedSpecs } from './HighlightedSpecs';
import { ContactCarForm } from './ContactCarForm';
import { OtherDetails } from '@/components/sections/detailed/OtherDetails';
import { CardUIType } from '@/types/car-card.type';
import { Recomendations } from '@/components/sections/detailed/Recomendations';

interface Props {
  detailedCar: Car;
  recomendations: CardUIType[] | null;
}
const DetailedModelContainer = ({ detailedCar, recomendations }: Props) => {
  return (
    <section>
      <div className="text-text-primary mt-12 mb-7 px-4 lg:px-22.5">
        <span className="text-text-secondary text-xs font-light">
          HOME/MODELO/{detailedCar.name}
        </span>
        <h1 className="title-h1">{detailedCar.name}</h1>
        <p className="mt-2 text-2xl font-light">
          {detailedCar.priceUsd} | {detailedCar.year} - {detailedCar.mileageKm}KM
        </p>
      </div>
      <SliderGallery images={detailedCar.images} />
      <HighlightedSpecs
        powerCv={detailedCar.highlights.powerCv}
        engine={detailedCar.highlights.engine}
        vehicleType={detailedCar.highlights.vehicleType}
      />
      <OtherDetails information={detailedCar.specs} />
      <ContactCarForm carName={detailedCar.name} />
      {recomendations && (
        <Recomendations carCollection={recomendations} currentID={detailedCar.id} />
      )}
    </section>
  );
};

export default DetailedModelContainer;