'use client';

import React from 'react';
import {useTranslations} from 'next-intl';
import {FaMapMarkerAlt} from 'react-icons/fa';

import CarteLeaflet from '@/components/global/CarteLeafletSingleClient';

const DEFAULT_ZOOM = 13;

export interface FicheMapVille {
  vilNom: string;
  vilGeoX?: number | null;
  vilGeoY?: number | null;
  vilGeoZoom?: number | null;
}

interface FicheMapProps {
  libelle: string;
  ville?: FicheMapVille | null;
  /** Lignes d'adresse de l'entrée, affichées dans la bulle du pointeur. */
  adresse?: Array<string | null | undefined>;
}

/**
 * Carte d'une fiche de l'annuaire, centrée sur sa ville. Sans ville connue, rien n'est affiché.
 * Le pointeur est placé au centre-ville : l'API n'a pas de géocodage de l'adresse.
 */
export default function FicheMap({libelle, ville, adresse = []}: FicheMapProps) {
  const t = useTranslations('Common');

  if (!ville || ville.vilGeoX == null || ville.vilGeoY == null) {
    return null;
  }

  const lignes = adresse.map((ligne) => ligne?.trim()).filter((ligne): ligne is string => Boolean(ligne));
  const lieuAdresse = lignes.length > 0 ? `${lignes.join(', ')}, ${ville.vilNom}` : ville.vilNom;

  return (
    <div className="tk-section-card" data-testid="map-section">
      <div className="tk-section-card-header">
        <h2 className="tk-section-card-title">
          <span className="tk-section-card-title-icon tk-section-card-title-icon-orange">
            <FaMapMarkerAlt />
          </span>
          {t('map_title')}
        </h2>
      </div>
      <div className="tk-section-card-body">
        <div className="tk-map-wrapper">
          <CarteLeaflet
            position={[ville.vilGeoX, ville.vilGeoY]}
            zoom={ville.vilGeoZoom ?? DEFAULT_ZOOM}
            lieuName={libelle}
            lieuAdresse={lieuAdresse}
          />
        </div>
      </div>
    </div>
  );
}