// -----------------------------------------------------------------------------
// Lou-Ka — Location court terme
// components/CtFicheMap.tsx : mini-carte 3D de la fiche court terme
// (KaSpotlightMap) — chargée paresseusement depuis CourtTermeFiche.tsx.
// -----------------------------------------------------------------------------
import { useMemo } from "react";
import "mapbox-gl/dist/mapbox-gl.css";
import "@groupe-ka/ka-maps/styles.css";
import type { MapProperty } from "@groupe-ka/ka-maps";
import { KaBrandBadge, KaSpotlightMap } from "@groupe-ka/ka-maps/react";
import type { CtListing } from "../ctapi";
import { louKaMapTheme } from "../kamaps/theme";
import { MAPBOX_TOKEN } from "../kamaps/config";

export default function CtFicheMap({ l }: { l: CtListing }) {
  const property = useMemo<MapProperty | null>(() => {
    if (l.lat == null || l.lng == null) return null;
    return {
      id: l.uid,
      appSource: "lou-ka",
      latitude: l.lat,
      longitude: l.lng,
      kind: "listing",
      listingType: "rent",
      price: l.price_night ?? undefined,
      propertyType: l.property_type || undefined,
      address: l.address || l.title || undefined,
      city: l.city || undefined,
      thumbnailUrl: l.images?.[0],
    };
  }, [l.uid, l.lat, l.lng, l.price_night, l.property_type, l.address, l.title, l.city, l.images]);

  if (!property) return null;

  return (
    <div className="lmap3d" role="img"
         aria-label={`Carte 3D — ${l.address || l.title}`}>
      <KaSpotlightMap
        theme={louKaMapTheme}
        mapboxToken={MAPBOX_TOKEN}
        property={property}
        buildingColor="#ff6a00"
      >
        <KaBrandBadge />
      </KaSpotlightMap>
    </div>
  );
}