'use client';

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

import './PartnerEventCard.css';
import {evenementHref} from '@/utils/evenementHref';

interface PartnerEventCardProps {
  event: Evenement;
  locale: string;
  imageUrl?: string | null;
}

export default function PartnerEventCard({event, locale, imageUrl}: PartnerEventCardProps) {
  const date = new Date(event.eveDate);
  const day = date.getDate();
  const month = date.toLocaleDateString(locale, {month: 'short'}).toUpperCase();

  return (
    <Link href={evenementHref(locale, event.eveId, `${event.eveTev?.tevLibelle ?? ''} ${event.eveVil?.vilNom ?? ''}`)} className="partner-event-card">
      {/* Image + Badge */}
      <div className="partner-event-card__image-container">
        {imageUrl ? (
          <img src={imageUrl} alt={event.eveLibelle || ''} className="partner-event-card__image" />
        ) : (
          <div className="partner-event-card__image-placeholder">
            <FaStar />
          </div>
        )}
        <span className="partner-event-card__badge">
          <FaStar className="partner-event-card__badge-icon" />
          Partenaire
        </span>
      </div>

      {/* Type badge */}
      <div className="partner-event-card__type-container">
        <span className="partner-event-card__type">{event.eveTev.tevLibelle}</span>
      </div>

      {/* Content */}
      <div className="partner-event-card__body">
        <div className="partner-event-card__date">
          <span className="partner-event-card__day">{day}</span>
          <span className="partner-event-card__month">{month}</span>
        </div>
        <div className="partner-event-card__info">
          <h3 className="partner-event-card__title">{event.eveLibelle}</h3>
          <span className="partner-event-card__location">
            <FaMapMarkerAlt className="partner-event-card__location-icon" />
            {event.eveVil?.vilNom ?? ''}
          </span>
        </div>
      </div>
    </Link>
  );
}