'use client';

import React, {useEffect, useState} from 'react';
import {FaCalendarAlt} from 'react-icons/fa';
import type {Evenement} from '@/types/stage';
import {getUpcomingEvents} from '@/services/evenementService';
import MemberEventsSection from '@/components/shared/MemberEventsSection/MemberEventsSection';

interface MemberEventsSectionHomepageProps {
  locale: string;
}

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

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

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

  return (
    <MemberEventsSection
      events={events}
      locale={locale}
      title="Événements adhérents"
      subtitle="Les prochains événements de nos adhérents"
      seeAllHref={`/${locale}/evenements`}
      maxDisplayed={6}
    />
  );
}