"use client";

import * as React from "react";
import type { Coordinates } from "@/lib/geo/types";

export type KartenMarker = {
  id: string;
  coords: Coordinates;
  label: string;
};

export type KarteProps = {
  center: Coordinates;
  marker?: KartenMarker[];
  className?: string;
};

/**
 * OPTIONALE Kartenansicht. Bewusst leichtgewichtig und ohne harte
 * MapLibre-Abhängigkeit gehalten — sie wird über `next/dynamic` (ssr:false)
 * eingebunden (siehe `KarteDynamic`), damit kein Karten-Code ins initiale
 * Bundle oder in den SSR-Pfad gerät. Bei Bedarf kann hier später MapLibre GL
 * integriert werden (clientseitig, dynamisch nachgeladen).
 */
export default function Karte({ center, marker = [], className }: KarteProps) {
  return (
    <div
      className={className}
      role="img"
      aria-label={`Karte zentriert auf ${center.lat.toFixed(4)}, ${center.lng.toFixed(4)}`}
    >
      <div className="rounded border border-rand bg-nebel p-4 text-xs text-anthrazit/70">
        <p>
          Zentrum: {center.lat.toFixed(4)}, {center.lng.toFixed(4)}
        </p>
        <ul className="mt-2 space-y-1">
          {marker.map((m) => (
            <li key={m.id}>
              {m.label} — {m.coords.lat.toFixed(4)}, {m.coords.lng.toFixed(4)}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}
