"use client";

import { useRef, type ReactNode } from "react";
import { PikselZemin } from "@/components/piksel-zemin";

/**
 * Şehir sayfasının başlık yüzeyi (DESIGN.md §4.17): beyaz kart, slate
 * piksel doku, sağda (lg) ya da altta (telefon) şehrin dot-matrix haritası.
 * Doku ile harita üst üste binmez: harita kabı `haric` ile zemine verilir
 * (§10.8 kuralı). Yalnız ref için client; metin ve harita sunucudan gelir.
 */
export function SehirYuzeyi({
  metin,
  harita,
  seed = 31,
}: {
  metin: ReactNode;
  harita: ReactNode;
  seed?: number;
}) {
  const haritaRef = useRef<HTMLDivElement>(null);
  return (
    <section className="relative isolate mt-6 overflow-hidden rounded-3xl border border-slate-200 bg-white p-6 sm:p-8">
      <PikselZemin ton="acik" seed={seed} haric={haritaRef} />
      <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,24rem)] lg:items-center lg:gap-10">
        <div>{metin}</div>
        {harita ? (
          <div ref={haritaRef} className="mx-auto w-full max-w-md lg:max-w-none">
            {harita}
          </div>
        ) : null}
      </div>
    </section>
  );
}