'use client';
import MarkdownRenderer from '@/components/markdown-render';
import { useGetApi } from '@/hooks/use-get-api';
import Image from 'next/image';
import React from 'react';
import FormularioRegistro from '../formulario/formulario-registro';
import { GetEventoWithCuestionario } from '@/types/evento';
import { formatFecha } from '@/utils/date-utils';

export default function FormularioPage({
  id_evento,
  id_cuestionario,
}: {
  id_evento: string;
  id_cuestionario: string;
}) {
  const { data, error } = useGetApi<GetEventoWithCuestionario>(
    `/evento/${id_evento}/cuestionario/${id_cuestionario}`
  );

  if (error) {
    return <div>Error al cargar el cuestionario: {error.message}</div>;
  }

  return (
    <div className="container my-5">
      <div className="text-center mb-4">
        {data?.banner && (
          <Image
            src={`${process.env.NEXT_PUBLIC_API_URL}/banners/${data.banner}`}
            alt={data?.nombre_evento || ''}
            width={800}
            height={400}
            className="img-fluid rounded"
          />
        )}
      </div>
      <h1>{data?.nombre_evento}</h1>
      {data?.descripcion_evento && (
        <MarkdownRenderer markdown={data?.descripcion_evento} />
      )}

      {data?.fecha_fin && data?.fecha_inicio && (
        <>
          <p className="mb-0 mt-2 text-muted">Horario:</p>
          <p className="text-muted">
            <i className="bi bi-clock me-1 text-primary"></i>
            {formatFecha(data.fecha_inicio!, {
              horas: true,
              minutos: true,
            })}{' '}
            al{' '}
            {formatFecha(data.fecha_fin!, {
              horas: true,
              minutos: true,
            })}
          </p>
        </>
      )}

      {data && (
        <FormularioRegistro
          id_cuestionario={data?.cuestionario.id_cuestionario}
        />
      )}
    </div>
  );
}
