import { cities } from "turkey-map-react/lib/data";
import {
  HARITA_GENISLIK,
  HARITA_UST_KIRPMA,
  HARITA_YUKSEKLIK,
  normalizeIlAdi,
} from "@/lib/harita";

export function UniversiteKonumHaritasi({
  universite,
  il,
}: {
  universite: string;
  il: string | null;
}) {
  if (!il) return null;

  return (
    <section
      aria-labelledby="universite-konumu"
      className="relative col-span-2 min-h-44 lg:col-span-1 lg:col-start-3 lg:row-start-1 lg:row-span-2 lg:min-h-0"
    >
      <h2 id="universite-konumu" className="sr-only">
        {universite} kampüs konumu
      </h2>

      <div className="relative h-full min-h-44 w-full">
        <svg
          viewBox={`0 ${HARITA_UST_KIRPMA} ${HARITA_GENISLIK} ${HARITA_YUKSEKLIK - HARITA_UST_KIRPMA}`}
          className="absolute inset-0 h-full w-full"
          role="img"
          aria-label={`${universite} konumunun Türkiye haritasındaki görünümü`}
        >
          {cities.map((city) => {
            const secili = il ? normalizeIlAdi(city.name) === il : false;
            return (
              <path
                key={city.id}
                d={city.path}
                fill={
                  secili
                    ? "oklch(0.809 0.105 251.8)"
                    : "oklch(0.929 0.013 255.5)"
                }
                stroke="white"
                strokeWidth={secili ? 1.8 : 1}
              >
                <title>{city.name}</title>
              </path>
            );
          })}
        </svg>
      </div>
    </section>
  );
}
