import { MONTHS } from '../config.js';

export class EventCard {
  constructor(container) {
    this.container = container;
    this.currentEvent = null;
    this.onClose = () => {};
  }

  show(event) {
    this.currentEvent = event;
    this.container.classList.remove('hidden');
    this.render(event);
  }

  hide() {
    this.container.classList.add('hidden');
    this.currentEvent = null;
  }

  render(event) {
    const date = new Date(event.date);
    const formattedDate = `${date.getDate()} ${MONTHS[date.getMonth()]} ${date.getFullYear()}`;

    this.container.innerHTML = `
      <button class="close-btn" aria-label="Fermer">&times;</button>
      <span class="event-type ${event.type}">${this.getTypeLabel(event.type)}</span>
      <h2>${event.name}</h2>
      <p class="event-location">${event.location.city}</p>
      <p class="event-date">${formattedDate}</p>
    `;

    this.container.querySelector('.close-btn').addEventListener('click', () => {
      this.hide();
      this.onClose();
    });
  }

  getTypeLabel(type) {
    const labels = {
      international: 'International',
      national: 'National',
      training: 'Entraînement'
    };
    return labels[type] || type;
  }

  setOnClose(callback) {
    this.onClose = callback;
  }
}