'use client';

import React, {useEffect, useState} from 'react';
import type {Evenement} from '@/types/stage';
import {getUpcomingEvents} from '@/services/evenementService';
import PartnerEventsSection from '@/components/shared/PartnerEventsSection/PartnerEventsSection';

interface PartnerEventsSectionHomepageProps {
  locale: string;
}

export default function PartnerEventsSectionHomepage({locale}: PartnerEventsSectionHomepageProps) {
  const [events, setEvents] = useState<Evenement[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    getUpcomingEvents({eveTev: 5, itemsPerPage: 6})
      .then(setEvents)
      .catch(() => setEvents([]))
      .finally(() => setLoading(false));
  }, []);

  if (loading) {
    return (
      <section className="partner-events">
        <div className="container">
          <div className="partner-events__loading">
            <div className="partner-events__loading-spinner"></div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <PartnerEventsSection
      events={events}
      locale={locale}
      title="Événements partenaires"
      subtitle="Découvrez les événements partenaires"
      seeAllHref={`/${locale}/evenements`}
      maxDisplayed={6}
    />
  );
}