import { clsx } from "clsx";

type Props = {
  eyebrow?: string;
  title: string;
  lede?: React.ReactNode;
  actions?: React.ReactNode;
  className?: string;
};

/**
 * Lightweight page heading for pages inside AdminShell — replaces the
 * oversized public PageHeader, which is too heavy for admin views.
 */
export function AdminHeading({ eyebrow, title, lede, actions, className }: Props) {
  return (
    <header
      className={clsx(
        "mb-6 flex flex-wrap items-end justify-between gap-4 border-b border-[var(--color-line)] pb-5",
        className,
      )}
    >
      <div className="min-w-0">
        {eyebrow && (
          <div className="text-[11px] font-bold uppercase tracking-[0.15em] text-[var(--color-blue)]">
            {eyebrow}
          </div>
        )}
        <h1 className="mt-1.5 font-display text-[28px] font-extrabold leading-tight tracking-tight text-[var(--color-ink)]">
          {title}
        </h1>
        {lede && (
          <p className="mt-2 max-w-2xl text-[14px] leading-relaxed text-[var(--color-slate)]">
            {lede}
          </p>
        )}
      </div>
      {actions && (
        <div className="flex flex-wrap items-center gap-2">{actions}</div>
      )}
    </header>
  );
}
