import { type ReactNode } from 'react';
import { cn } from '@/lib/utils';

interface PageHeaderProps {
  title: string;
  description?: string;
  actions?: ReactNode;
  className?: string;
  /** Optional small uppercase label above the title. */
  eyebrow?: string;
  /** Optional one-line stats / KPI summary under the description. */
  kpiLine?: ReactNode;
  /** Render with the polished gradient-brand-soft background strip. */
  variant?: 'plain' | 'gradient';
}

/**
 * Consistent page-level header: title, optional description, KPI sub-line,
 * eyebrow, and an action slot. Use `variant="gradient"` for hero strips on
 * landing pages and detail headers; the plain variant remains the default so
 * existing call-sites stay unchanged.
 */
export function PageHeader({
  title,
  description,
  actions,
  className,
  eyebrow,
  kpiLine,
  variant = 'plain',
}: PageHeaderProps) {
  const isGradient = variant === 'gradient';
  return (
    <div
      className={cn(
        'mb-6 flex items-start justify-between gap-4',
        isGradient &&
          'rounded-xl border border-slate-200 bg-gradient-brand-soft px-5 py-4 shadow-xs',
        className,
      )}
    >
      <div className="min-w-0">
        {eyebrow ? (
          <div className="mb-1 text-xs font-semibold uppercase tracking-wide text-brand">
            {eyebrow}
          </div>
        ) : null}
        <h1 className="truncate text-2xl font-bold tracking-tight text-foreground">{title}</h1>
        {description && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
        {kpiLine ? (
          <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
            {kpiLine}
          </div>
        ) : null}
      </div>
      {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
    </div>
  );
}