'use client';

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

interface AnnuaireMemberEventsProps {
  aenId: number;
  /** Nom de l'entrée, pour « Tous les événements de {nom} ». */
  aenLibelle?: string;
  locale: string;
}

/** Bloc agenda d'une entrée d'annuaire (spec L91) : ses prochains événements et le lien vers l'agenda filtré. */
export default function AnnuaireMemberEvents({aenId, aenLibelle, locale}: AnnuaireMemberEventsProps) {
  const t = useTranslations('AnnuaireDetailsPage');
  const [events, setEvents] = useState<Evenement[]>([]);
  const [loading, setLoading] = useState(true);

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

  if (loading) {
    return (
      <div className="member-events__loading">
        <div className="member-events__loading-spinner"></div>
      </div>
    );
  }

  return (
    <MemberEventsSection
      events={events}
      locale={locale}
      title={t('next_events')}
      seeAllHref={`/${locale}/evenements?orgas=${aenId}`}
      seeAllLabel={t('all_events_of', {nom: aenLibelle ?? ''})}
      maxDisplayed={3}
    />
  );
}