'use client';

import type { ReactNode } from 'react';

/**
 * Single editorial page header: accent pill + serif title (base + italic accent)
 * + subtitle. Every dashboard surface uses this so the product speaks one voice.
 */
export function PageHeader({
  pill,
  titleBase,
  titleAccent,
  subtitle,
  action,
  className = '',
}: {
  pill: string;
  titleBase: string;
  titleAccent: string;
  subtitle?: string;
  action?: ReactNode;
  className?: string;
}) {
  return (
    <div className={`mb-10 flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between ${className}`}>
      <div>
        <span className="accent-pill mb-4 block w-fit">{pill}</span>
        <h1 className="mb-3 text-4xl font-serif font-medium leading-tight tracking-tight text-brand-dark dark:text-white md:text-5xl">
          {titleBase} <span className="italic">{titleAccent}</span>
        </h1>
        {subtitle && (
          <p className="max-w-xl text-sm font-light leading-relaxed text-brand-dark/60 dark:text-white/60">
            {subtitle}
          </p>
        )}
      </div>
      {action && <div className="shrink-0">{action}</div>}
    </div>
  );
}