import Link from "next/link";
import { X } from "lucide-react";
import { SectTitle } from "@/components/mockup-ui";

/**
 * Serverseitig gerendertes, schließbares Popup (Overlay). Öffnen/Schließen
 * läuft über searchParams der Listen-Seite (?detail=/​?edit=/?new=1) —
 * kein Client-State, Browser-Zurück schließt das Popup ebenfalls.
 */
export function Modal({
  title,
  sub,
  headerExtra,
  closeHref,
  closeLabel,
  children,
  footer,
}: {
  title: string;
  sub?: string;
  headerExtra?: React.ReactNode;
  closeHref: string;
  closeLabel: string;
  children: React.ReactNode;
  footer?: React.ReactNode;
}) {
  return (
    <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/30 p-6 backdrop-blur-[2px]">
      <div className="shadow-card my-auto w-full max-w-4xl rounded-2xl border bg-card">
        <div className="flex items-start justify-between gap-3 border-b p-5">
          <SectTitle title={title} sub={sub} />
          <div className="flex items-center gap-3">
            {headerExtra}
            <Link
              href={closeHref}
              title={closeLabel}
              className="rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
            >
              <X className="size-4.5" />
            </Link>
          </div>
        </div>
        {children}
        {footer && <div className="flex justify-end gap-2 border-t p-5">{footer}</div>}
      </div>
    </div>
  );
}