pn-new-crm/src/components/shared/page-header.tsx

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.
 *
 * Mobile-aware: below sm (640px) the header stacks vertically (title above
 * actions) instead of side-by-side, and the description hides when actions
 * are present (to preserve scroll real estate). Title font scales down too.
 */
export function PageHeader({
  title,
  description,
  actions,
  className,
  eyebrow,
  kpiLine,
  variant = 'plain',
}: PageHeaderProps) {
  const isGradient = variant === 'gradient';
  return (
    <div
      className={cn(
        'mb-4 flex flex-col gap-3 sm:mb-6 sm:flex-row sm:items-start sm:justify-between sm: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 flex-1">
        {eyebrow ? (
          <div className="mb-1 text-xs font-semibold uppercase tracking-wide text-brand">
            {eyebrow}
          </div>
        ) : null}
        <h1 className="truncate text-xl font-bold tracking-tight text-foreground sm:text-2xl">
          {title}
        </h1>
        {description ? (
          <p className={cn('mt-1 text-sm text-muted-foreground', actions && 'hidden sm:block')}>
            {description}
          </p>
        ) : null}
        {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 flex-wrap items-center gap-2 sm:flex-nowrap">{actions}</div>
      ) : null}
    </div>
  );
}