'use client';

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

import './PartnerEventsSection.css';

interface PartnerEventsSectionProps {
  events: Evenement[];
  imageUrls?: Record<number, string | null>;
  locale: string;
  title: string;
  subtitle?: string;
  emptyMessage?: string;
  seeAllHref?: string;
  maxDisplayed?: number;
}

export default function PartnerEventsSection({
  events,
  imageUrls,
  locale,
  title,
  subtitle,
  emptyMessage = 'Aucun événement en partenariat',
  seeAllHref,
  maxDisplayed = 6,
}: PartnerEventsSectionProps) {
  const displayedEvents = (events ?? []).slice(0, maxDisplayed);

  return (
    <section className="partner-events">
      <div className="container">
        {/* Header with stars */}
        <div className="partner-events__header">
          <div className="partner-events__stars">
            <FaStar className="partner-events__star partner-events__star--small" />
            <FaStar className="partner-events__star partner-events__star--large" />
            <FaStar className="partner-events__star partner-events__star--small" />
          </div>
          {subtitle && <p className="partner-events__subtitle">{subtitle}</p>}
          <h2 className="partner-events__title">{title}</h2>
        </div>

        {/* Content */}
        {displayedEvents.length === 0 ? (
          <div className="partner-events__empty">
            <FaStar className="partner-events__empty-icon" />
            <p>{emptyMessage}</p>
          </div>
        ) : (
          <>
            <div className="row g-4">
              {displayedEvents.map((event) => (
                <div className="col-12 col-md-6 col-lg-4" key={event.eveId}>
                  <PartnerEventCard
                    event={event}
                    locale={locale}
                    imageUrl={imageUrls?.[event.eveId]}
                  />
                </div>
              ))}
            </div>

            {seeAllHref && (
              <div className="text-center mt-5">
                <Link href={seeAllHref} className="partner-events__see-all">
                  Voir tous les événements partenaires
                  <FaArrowRight className="partner-events__see-all-icon" />
                </Link>
              </div>
            )}
          </>
        )}
      </div>
    </section>
  );
}