import type { ReactNode } from "react";

import { cn } from "@/lib/utils";

type AdminSectionHeaderProps = {
  title: string;
  description?: string;
  actions?: ReactNode;
  className?: string;
};

/** 页内区块标题（与 ConfigSection 一致），用于 Card 内子分区或配置文档。 */
export function AdminSectionHeader({
  title,
  description,
  actions,
  className,
}: AdminSectionHeaderProps) {
  return (
    <div
      className={cn(
        "flex flex-wrap items-start justify-between gap-3 border-b border-border/60 pb-3",
        className,
      )}
    >
      <div className="min-w-0 space-y-1">
        <h3 className="text-base font-semibold text-foreground">{title}</h3>
        {description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
      </div>
      {actions ? <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div> : null}
    </div>
  );
}
