import AdminButton from "./AdminButton";
import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";

interface AdminPageHeaderProps {
  title: string;
  description?: string;
  action?: {
    label: string;
    onClick: () => void;
    icon?: IconDefinition;
    variant?: "primary" | "secondary" | "danger" | "success";
  };
  secondaryAction?: {
    label: string;
    onClick: () => void;
    icon?: IconDefinition;
  };
}

export default function AdminPageHeader({
  title,
  description,
  action,
  secondaryAction,
}: AdminPageHeaderProps) {
  return (
    <div className="mb-6 flex flex-col gap-4 border-b border-slate-800 pb-6 md:flex-row md:items-end md:justify-between">
      <div className="min-w-0">
        <h1 className="text-2xl font-semibold tracking-tight text-slate-100">
          {title}
        </h1>
        {description && (
          <p className="mt-1 text-sm text-slate-400">{description}</p>
        )}
      </div>
      {(action || secondaryAction) && (
        <div className="flex shrink-0 items-center gap-2">
          {secondaryAction && (
            <AdminButton
              variant="secondary"
              onClick={secondaryAction.onClick}
              icon={secondaryAction.icon}
            >
              {secondaryAction.label}
            </AdminButton>
          )}
          {action && (
            <AdminButton
              variant={action.variant || "primary"}
              onClick={action.onClick}
              icon={action.icon}
            >
              {action.label}
            </AdminButton>
          )}
        </div>
      )}
    </div>
  );
}
