import Link from 'next/link';
import type { ReactNode } from 'react';
import { cn } from '@/lib/cn';

/** Editorial page header: optional breadcrumb + eyebrow, display title, lede, right-side actions. */
export function PageHeader({
  title,
  lede,
  eyebrow,
  crumbs,
  actions,
  meta,
  className,
}: {
  title: ReactNode;
  lede?: ReactNode;
  eyebrow?: ReactNode;
  crumbs?: Array<{ href: string; label: ReactNode }>;
  actions?: ReactNode;
  meta?: ReactNode;
  className?: string;
}) {
  return (
    <header className={cn('pb-4 pt-6 md:pt-10', className)}>
      {crumbs?.length ? (
        <nav aria-label="Breadcrumb" className="text-xs text-ink-3">
          {crumbs.map((c, i) => (
            <span key={c.href}>
              {i > 0 ? <span className="mx-1.5">/</span> : null}
              <Link href={c.href} className="-my-3 inline-flex min-h-[44px] items-center hover:text-accent md:my-0 md:min-h-0">
                {c.label}
              </Link>
            </span>
          ))}
        </nav>
      ) : null}
      <div className="flex flex-wrap items-end justify-between gap-x-8 gap-y-3">
        <div className="min-w-0 max-w-3xl">
          {eyebrow ? <div className="eyebrow mb-1">{eyebrow}</div> : null}
          <h1 className="display text-3xl leading-tight text-ink md:text-4xl">{title}</h1>
          {lede ? <p className="mt-2 max-w-prose text-sm text-ink-2 md:text-base">{lede}</p> : null}
          {meta ? <div className="tnum mt-1 text-xs text-ink-3">{meta}</div> : null}
        </div>
        {actions ? <div className="flex flex-wrap items-center gap-2 text-sm">{actions}</div> : null}
      </div>
    </header>
  );
}

/** Quiet secondary action link/button look shared by the explore pages. */
export const ACTION_CLS = 'inline-flex min-h-[44px] items-center gap-1.5 rounded-sm border border-rule px-3 text-sm text-ink hover:bg-surface-2 md:min-h-[36px]';
export const PRIMARY_ACTION_CLS = 'inline-flex min-h-[44px] items-center gap-1.5 rounded-sm bg-ink px-3 text-sm font-medium text-paper hover:bg-accent hover:text-accent-ink md:min-h-[36px]';