"use client";

import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function PageHeader({
  title,
  description,
  actions,
  tabs,
  activeTab,
  onTabChange,
}: {
  title: string;
  description?: string;
  actions?: React.ReactNode;
  tabs?: { id: string; label: string }[];
  activeTab?: string;
  onTabChange?: (id: string) => void;
}) {
  return (
    <div className="mb-6 space-y-4">
      <div className="flex flex-wrap items-end justify-between gap-4">
        <div>
          <h1 className="font-display text-2xl font-black uppercase tracking-tight md:text-3xl">
            {title}
          </h1>
          {description && (
            <p className="mt-1 text-sm text-muted-foreground">{description}</p>
          )}
        </div>
        {actions && (
          <div className="flex flex-wrap items-center gap-2">{actions}</div>
        )}
      </div>
      {tabs && tabs.length > 0 && (
        <Tabs
          value={activeTab ?? tabs[0].id}
          onValueChange={onTabChange}
          className="w-full"
        >
          <TabsList>
            {tabs.map((t) => (
              <TabsTrigger key={t.id} value={t.id}>
                {t.label}
              </TabsTrigger>
            ))}
          </TabsList>
        </Tabs>
      )}
    </div>
  );
}