"use client";

import React from "react";
import { FeatherDownload, FeatherRefreshCw, FeatherShare2 } from "@subframe/core";
import { useToast } from "../../context/ToastContext";

/**
 * Kopf einer Analyse-Seite: Titel, Einordnung, Seitenaktionen.
 * Die Aktionen sind im Prototyp bewusst folgenlos (Toast statt Export) —
 * siehe HANDOVER.md, Abschnitt "Was noch Logik braucht".
 */
export function PageHeader({
  titel,
  beschreibung,
  aktionen,
}: {
  titel: string;
  beschreibung: string;
  aktionen?: React.ReactNode;
}) {
  const { zeigeToast } = useToast();

  return (
    <div className="flex flex-wrap items-start justify-between gap-4 px-6 pb-6 pt-6">
      <div className="flex min-w-0 flex-col gap-0">
        <h1 className="text-[22px] font-semibold leading-tight tracking-[-0.02em] text-text-neutral-primary">
          {titel}
        </h1>
        <p className="text-[13px] leading-relaxed text-text-neutral-tertiary">{beschreibung}</p>
      </div>

      <div className="dv-no-print flex flex-none items-center gap-2">
        {aktionen}
        <button
          onClick={() => zeigeToast("Ansicht aktualisiert", "Demo-Daten, Stichtag 30.07.2026")}
          className="flex h-9 items-center gap-2 rounded-md border border-solid border-border-default bg-white px-3 text-[13px] font-medium text-text-neutral-secondary hover:bg-neutral-50"
        >
          <FeatherRefreshCw className="text-[15px]" />
          Aktualisieren
        </button>
        <button
          onClick={() => zeigeToast("Export vorgemerkt", "PDF/CSV folgt in der Umsetzung")}
          className="flex h-9 items-center gap-2 rounded-md border border-solid border-border-default bg-white px-3 text-[13px] font-medium text-text-neutral-secondary hover:bg-neutral-50"
        >
          <FeatherDownload className="text-[15px]" />
          Export
        </button>
        <button
          onClick={() => zeigeToast("Link kopiert", "Teilen wird serverseitig umgesetzt")}
          className="flex h-9 w-9 items-center justify-center rounded-md border border-solid border-border-default bg-white text-text-neutral-tertiary hover:bg-neutral-50"
          aria-label="Ansicht teilen"
        >
          <FeatherShare2 className="text-[15px]" />
        </button>
      </div>
    </div>
  );
}