'use client';

import ClientCarousel from '@/client-components/client-carousel';
import EventoCard from '@/components/evento-card';
import { useGetApi } from '@/hooks/use-get-api';
import { GetEventoWithCuestionarios } from '@/types/evento';
import React from 'react';

export default function Page() {
  const { loading, data } = useGetApi<GetEventoWithCuestionarios[]>(
    '/evento/activos/cuestionarios'
  );

  return (
    <div>
      <div className="mx-auto mb-5 mt-3 fade-in-down-bounce">
        <ClientCarousel
          images={data?.map((item) => ({
            src: item.banner
              ? `${process.env.NEXT_PUBLIC_API_URL}/banners/${item.banner}`
              : '/default-banner.jpg',
            alt: item.nombre_evento,
          }))}
        />
      </div>
      {loading && <div>Cargando...</div>}
      {data && (
        <div className="row">
          {data.map((item, key) => {
            const fadeClass = `delay-${(key % 5) + 1}`;
            return (
              <div className={`col-md-6 col-lg-4 my-4 fade-in-up-bounce ${fadeClass}`} key={key}>
                <EventoCard evento={item} />
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}
