import FormularioPage from '@/containers/pages/formulario-page';
import { GetEventoWithCuestionario } from '@/types/evento';
import { Metadata } from 'next';
import React from 'react';

type Params = {
  nombre_evento: string;
  id_evento: string;
  id_cuestionario: string;
};

type Props = {
  params: Promise<Params>;
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { id_evento, id_cuestionario } = await params;

  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_URL}/evento/${id_evento}/cuestionario/${id_cuestionario}`
  );

  const data: GetEventoWithCuestionario = await response.json();

  return {
    title: data?.nombre_evento || 'Evento',
    description: data?.descripcion_evento || 'Descripción del evento',
    openGraph: {
      title: data?.nombre_evento || 'Evento',
      description: data?.descripcion_evento || 'Descripción del evento',
      images: [
        {
          url: `${process.env.NEXT_PUBLIC_API_URL}/banners/${data.banner}`,
          width: 800,
          height: 400,
          alt: data?.nombre_evento || 'Evento',
        },
      ],
    },
  };
}

export default async function Page({ params }: Props) {
  const { id_evento, id_cuestionario } = await params;
  return (
    <FormularioPage id_evento={id_evento} id_cuestionario={id_cuestionario} />
  );
}
