import DetailedModelContainer from '@/components/sections/detailed/DetailedModelContainer';
import { notFound } from 'next/navigation';
import { Metadata } from 'next';
import { getDetailedCar } from '@/services/detailedCar.service';
import { getCars } from '@/services/cars.service';

type Props = {
  params: Promise<{
    slug: string;
  }>;
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const response = await getDetailedCar(slug);
  if (response.error)
    return {
      title: 'Automóvil no encontradp',
    };

  const carFounded = response.detailedCar;
  const mfTitle = carFounded.name + ' | Malek Fara ';
  const mfDescription = `Conoce más acerca de ` + carFounded.name;
  const mfURL = 'https://malekfara.com/modelos/' + carFounded.id;
  const mfImage = carFounded.images[0];

  return {
    title: mfTitle,
    description: mfDescription,
    openGraph: {
      title: mfTitle,
      description: mfDescription,
      url: mfURL,
      siteName: 'Malek Fara',
      images: [
        {
          url: mfImage,
          width: 800,
          height: 600,
          alt: mfTitle,
        },
      ],
      type: 'profile',
    },
    twitter: {
      card: 'summary_large_image',
      title: mfTitle,
      description: mfDescription,
      images: [mfImage],
    },
  };
}

export default async function DetailedModel({ params }: Props) {
  const { slug } = await params;
  const response = await getDetailedCar(slug);
  const recomendations = await getCars();
  if (response.error) {
    notFound();
  }

  return (
    <main>
      <DetailedModelContainer
        detailedCar={response.detailedCar}
        recomendations={recomendations.carCards}
      />
    </main>
  );
}