// @design-system: layout/PageHeader
/**
 * PageHeader - semantic <header> landmark with title, subtitle, and actions slot.
 *
 * @example
 * <PageHeader
 *   title={t('purchases_title')}
 *   subtitle={t('active_deals_count')}
 *   actions={<Button variant="ghost">{t('filter')}</Button>}
 * />
 */

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

export interface PageHeaderProps {
  title: string;
  subtitle?: string;
  /** Slot rendered at logical end of the header row. */
  actions?: ReactNode;
  className?: string;
}

export function PageHeader({ title, subtitle, actions, className }: PageHeaderProps) {
  return (
    <header className={cn('flex items-start justify-between gap-3', 'px-4 py-4', className)}>
      <div className="flex min-w-0 flex-col gap-0.5">
        <h1 className="text-text-primary text-xl font-bold leading-[var(--line-height-tight)]">
          {title}
        </h1>
        {subtitle && (
          <p className="text-text-secondary text-sm leading-[var(--line-height-normal)]">
            {subtitle}
          </p>
        )}
      </div>
      {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
    </header>
  );
}