'use client';

import React from 'react';
import Link from 'next/link';
import {FaCalendarAlt, FaArrowRight} from 'react-icons/fa';
import type {Evenement} from '@/types/stage';
import MemberEventCard from './MemberEventCard';

import './MemberEventsSection.css';

interface MemberEventsSectionProps {
  events: Evenement[];
  imageUrls?: Record<number, string | null>;
  locale: string;
  title: string;
  subtitle?: string;
  seeAllHref?: string;
  /** Libellé du lien « voir tout » ; par défaut « Voir tous les événements ». */
  seeAllLabel?: string;
  badgeCount?: string;
  maxDisplayed?: number;
}

export default function MemberEventsSection({
  events,
  imageUrls,
  locale,
  title,
  subtitle,
  seeAllHref,
  seeAllLabel,
  badgeCount,
  maxDisplayed = 6,
}: MemberEventsSectionProps) {
  const displayedEvents = (events ?? []).slice(0, maxDisplayed);

  return (
    <section className="member-events py-5">
      <div className="container">
        {/* Header */}
        <div className="member-events__header mb-5">
          <div className="member-events__header-left">
            <div className="member-events__icon-circle">
              <FaCalendarAlt />
            </div>
            <div>
              <h2 className="member-events__title">{title}</h2>
              {subtitle && <p className="member-events__subtitle">{subtitle}</p>}
            </div>
          </div>
          {badgeCount && <span className="member-events__badge">{badgeCount}</span>}
        </div>

        {/* Content */}
        {displayedEvents.length === 0 ? (
          <div className="member-events__empty">
            <FaCalendarAlt className="member-events__empty-icon" />
            <p>Aucun événement à venir</p>
          </div>
        ) : (
          <div className="row g-4">
            {displayedEvents.map((event) => (
              <div className="col-12 col-md-6 col-lg-4" key={event.eveId}>
                <MemberEventCard
                  event={event}
                  locale={locale}
                  imageUrl={imageUrls?.[event.eveId]}
                />
              </div>
            ))}
          </div>
        )}

        {/* Le lien vers l'agenda filtré reste proposé même sans événement (spec L91). */}
        {seeAllHref && (
          <div className={`text-center ${displayedEvents.length === 0 ? 'mt-3' : 'mt-5'}`}>
            <Link href={seeAllHref} className="member-events__see-all">
              {seeAllLabel ?? 'Voir tous les événements'}
              <FaArrowRight className="member-events__see-all-icon" />
            </Link>
          </div>
        )}
      </div>
    </section>
  );
}