"use client";

import type { RefObject } from "react";
import { PixelMasonry } from "@/components/pixel-decor";
import { cn } from "@/lib/utils";

/**
 * CTA yüzeylerinin piksel zemini (DESIGN.md §10.8) — tek kaynak. Bilal'in
 * kararı (24 Eyl 2026): pikseller **yalnız CTA yüzeylerinde** (mavi bant,
 * kapanış kartı, arama penceresi kartı); beyaz içerik kartlarında değil
 * ("/sonuc'taki kartın arkasına da piksel koymuşsun; pikseller CTA'larda
 * olacak sadece"). Beyaz kareler; kap `relative isolate overflow-hidden`
 * olmalı, zemin ilk çocuk olarak konur.
 *
 * Doku kabın gerçek ölçüsüne göre üretilir; kenar çerçevesi yoğun, orta
 * seyrek. Üstünde kreatif ya da iri sayı varsa `haric` ile o öğe verilir,
 * çevresi boş kalır.
 */
export function PikselZemin({
  seed = 7,
  yogunluk,
  kenar,
  haric,
  ton = "koyu",
  className,
}: {
  /**
   * `koyu`: renkli (mavi) zemin, kareler beyaz. `acik`: beyaz zemin, kareler
   * slate (Bilal, 24 Eyl 2026: "beyaz arka planda piksel de güzel görünüyor").
   */
  ton?: "koyu" | "acik";
  /** Aynı ekrandaki iki yüzey farklı desen alsın */
  seed?: number;
  /** Doluluk çarpanı (1 varsayılan) */
  yogunluk?: number;
  /** Kenar çerçevesinin genişliği, kısa kenarın oranı (0.3 varsayılan) */
  kenar?: number;
  /** Çevresi boş bırakılacak öğe */
  haric?: RefObject<HTMLElement | null>;
  /** Dikey taşma payı vb. (varsayılan `-inset-y-6`) */
  className?: string;
}) {
  return (
    <div
      aria-hidden
      className={cn(
        "pointer-events-none absolute inset-x-0 -inset-y-6 -z-10",
        ton === "acik" ? "text-slate-400" : "text-white",
        className,
      )}
    >
      <PixelMasonry
        seed={seed}
        yogunluk={yogunluk}
        kenar={kenar}
        haric={haric}
      />
    </div>
  );
}