"use client";

import { useEffect, useState } from "react";

interface Event {
  id: string;
  date: string;
  name: string;
}

export default function EventsSection() {
  const [events, setEvents] = useState<Event[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/events")
      .then((res) => res.json())
      .then((data) => {
        // Prendre seulement les 3 premiers événements pour la section d'accueil
        setEvents(data.slice(0, 3));
        setLoading(false);
      })
      .catch((err) => {
        console.error("Error fetching events:", err);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return (
      <section className="w-full bg-gray-950 border-t border-pixel-gold/30 py-16">
        <div className="max-w-7xl mx-auto px-8 text-center text-pixel-gold">
          Chargement...
        </div>
      </section>
    );
  }

  if (events.length === 0) {
    return null;
  }
  return (
    <section className="w-full bg-gray-950 border-t border-pixel-gold/30 py-16">
      <div className="max-w-7xl mx-auto px-8">
        <div className="flex flex-col md:flex-row items-center justify-around gap-8">
          {events.map((event, index) => (
            <div key={index} className="flex flex-col items-center">
              <div className="flex flex-col items-center mb-4">
                <span className="text-pixel-gold text-xs uppercase tracking-widest mb-2">
                  Événement
                </span>
                <div className="w-16 h-px bg-pixel-gold"></div>
              </div>
              <div className="text-white text-lg font-bold mb-2 uppercase tracking-wide">
                {event.date}
              </div>
              <div className="text-white text-base text-center">
                {event.name}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}