'use client';

import Button from '@/components/button';
import EventoCard from '@/components/evento-card';
import { useGetApi } from '@/hooks/use-get-api';
import { GetEventoWithCuestionarios } from '@/types/evento';
import Link from 'next/link';
import React from 'react';

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

  if (loading) return <div>Cargando formularios...</div>;
  if (error) return <div className="alert alert-danger">{error.message}</div>;

  return (
    <>
      <div className="d-flex justify-content-between align-items-center my-4">
        <h1>Eventos</h1>
        <Link href="/administrador/crear-evento">
          <Button>Crear Evento</Button>
        </Link>
      </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}
                  user='administrador'
                />
              </div>
            );
          })}
        </div>
      )}
    </>
  );
}
