"use client";

import { useTranslations } from "next-intl";
import { MapPin } from "lucide-react";
import LocationMapView from "@/components/maps/LocationMapView";
import { isValidLatLng, parseCoord } from "@/lib/coordinates";

type Props = {
  lat?: unknown;
  lng?: unknown;
  className?: string;
  mapHeight?: number;
};

export default function GroupAuctionLocationMapSection({
  lat,
  lng,
  className = "",
  mapHeight = 280,
}: Props) {
  const t = useTranslations("ANNUAL_GROUP_AUCTION.venue_map");
  const mapLat = parseCoord(lat);
  const mapLng = parseCoord(lng);
  if (mapLat === null || mapLng === null) return null;
  if (!isValidLatLng(mapLat, mapLng)) return null;

  return (
    <section
      className={`space-y-3 pt-8 mt-8 border-t border-slate-200/90 ${className}`}
      aria-labelledby="annual-venue-map-heading"
    >
      <div className="flex items-center gap-2">
        <MapPin className="w-5 h-5 text-[#0F5132] shrink-0" aria-hidden />
        <h2
          id="annual-venue-map-heading"
          className="text-lg sm:text-xl font-extrabold text-slate-900"
        >
          {t("title")}
        </h2>
      </div>
      <p className="text-sm text-slate-600">{t("subtitle")}</p>
      <LocationMapView
        lat={mapLat}
        lng={mapLng}
        height={mapHeight}
        className="shadow-md"
      />
    </section>
  );
}