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

/** 后台统一页头：36px 图标槽 + 标题 + 说明 + 可选右侧 CTA */
export default function AdminPageHeader({
  icon: Icon,
  title,
  description,
  actions,
}: {
  icon: LucideIcon;
  title: string;
  description?: ReactNode;
  actions?: ReactNode;
}) {
  return (
    <div className="mb-5 flex items-start justify-between gap-3 flex-wrap">
      <div className="min-w-0">
        <h1
          className="text-[22px] sm:text-[26px] font-extrabold tracking-tight flex items-center gap-2.5"
          style={{ color: "var(--ink)" }}
        >
          <span
            className="w-9 h-9 rounded-xl flex items-center justify-center shrink-0"
            style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
            aria-hidden
          >
            <Icon size={18} />
          </span>
          {title}
        </h1>
        {description != null && description !== "" && (
          <p className="meta mt-1.5 text-[12.5px] leading-relaxed">{description}</p>
        )}
      </div>
      {actions ? <div className="flex items-center gap-2 shrink-0 flex-wrap">{actions}</div> : null}
    </div>
  );
}