import type { ReactNode } from "react";

// Gemeinsame Bausteine der Unterseiten im Plakat-Stil. Bewusst ohne "use client",
// damit Server- und Client-Seiten sie gleichermaßen nutzen können.

export const btn =
  "inline-flex items-center gap-2 rounded-full bg-ink px-5 py-3 text-[15px] font-semibold text-paper transition-transform duration-150 ease-out active:scale-[0.97]";

export const ghost =
  "inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium shadow-[inset_0_0_0_1.5px_rgb(var(--plakat-ink))] transition-[background-color,color,transform] duration-150 ease-out hover:bg-ink hover:text-paper active:scale-[0.97]";

/** Rahmen mit hartem Versatzschatten, ohne Hintergrund (für farbige Karten) */
export const frame = "rounded-[18px] border-2 border-ink shadow-[6px_6px_0_rgb(var(--plakat-ink))]";

export const card = `${frame} bg-paper`;

export const monoLabel = "font-mono text-[13px] leading-snug";

interface SubpageIntroProps {
  /** Zurück-Link oben links */
  back: ReactNode;
  /** Kleine Zeile oben rechts, z. B. Kategorie oder Rechtsgrundlage */
  kicker?: ReactNode;
  title: ReactNode;
  children?: ReactNode;
}

/** Kopf einer Unterseite: Zurück-Pille, große Plakat-Zeile, Einleitung. */
export function SubpageIntro({ back, kicker, title, children }: SubpageIntroProps) {
  return (
    <header className="border-b-2 border-ink pb-8 md:pb-12">
      <div className="flex flex-wrap items-center justify-between gap-3">
        {back}
        {kicker && <p className={monoLabel}>{kicker}</p>}
      </div>
      <h1 className="mt-8 hyphens-auto break-words text-balance font-display text-[clamp(3rem,11vw,9.5rem)] font-extrabold leading-[0.86] tracking-[-0.05em] [font-variation-settings:'wdth'_80] md:mt-12">
        {title}
        <span className="text-signal">.</span>
      </h1>
      {children && <div className="mt-6 max-w-[52ch] text-lg leading-relaxed md:text-xl">{children}</div>}
    </header>
  );
}

/** Pfeil nach links für Zurück-Links, rein dekorativ */
export function BackArrow() {
  return <span aria-hidden="true">←</span>;
}