"use client";

/**
 * PageHeader — consistent admin page chrome.
 *
 * Layout:
 *   ┌─[icon]─Title─badge─────────────────[actions]┐
 *   │        Subtitle                              │
 *   └──────────────────────────────────────────────┘
 *
 * Title uses text-2xl font-semibold; subtitle is a soft text-slate-500.
 * Action area accepts arbitrary children (filter chips, refresh
 * buttons, primary CTAs).
 */

import type { ReactNode } from "react";
import type { LucideIcon } from "lucide-react";

interface Props {
  title: string;
  subtitle?: string;
  icon?: LucideIcon;
  /** Optional badge rendered next to the title (count, status, etc.) */
  badge?: ReactNode;
  /** Right-aligned action area — buttons, filter pills, refresh. */
  actions?: ReactNode;
}

export function PageHeader({ title, subtitle, icon: Icon, badge, actions }: Props) {
  return (
    <header className="flex items-start justify-between gap-4 flex-wrap">
      <div className="min-w-0">
        <div className="flex items-center gap-2 flex-wrap">
          {Icon && (
            <span className="w-8 h-8 rounded-lg bg-slate-100 text-slate-700 flex items-center justify-center shrink-0">
              <Icon className="w-4 h-4" />
            </span>
          )}
          <h1 className="text-2xl font-semibold text-slate-900 leading-tight">{title}</h1>
          {badge}
        </div>
        {subtitle && <p className="text-sm text-slate-500 mt-1">{subtitle}</p>}
      </div>
      {actions && <div className="flex items-center gap-2 flex-wrap">{actions}</div>}
    </header>
  );
}

/** Section header — uppercase tracking-wider with a subtle bottom rule.
 *  Use to break up sections within a page. */
export function SectionHeader({ title, right }: { title: string; right?: ReactNode }) {
  return (
    <div className="flex items-center justify-between border-b border-slate-200 pb-2 mb-3">
      <h2 className="text-xs font-semibold uppercase tracking-widest text-slate-500">{title}</h2>
      {right}
    </div>
  );
}
