import { ChevronDown, type LucideIcon } from "lucide-react";

interface SectionHeaderProps {
  icon: LucideIcon;
  label: string;
  badge?: React.ReactNode;
}

export function SectionHeader({ icon: Icon, label, badge }: SectionHeaderProps) {
  return (
    <div className="flex w-full items-center justify-between border-b border-blue-200/70 bg-blue-100 px-3 py-1.5 text-left dark:border-blue-900/40 dark:bg-blue-950/40">
      <div className="flex items-center gap-2">
        <Icon className="size-3.5 shrink-0 text-blue-600 dark:text-blue-400" />
        <span className="font-semibold text-xs uppercase tracking-wider text-blue-800 dark:text-blue-300">{label}</span>
        {badge}
      </div>
      <ChevronDown className="size-3.5 text-blue-500 transition-transform [[data-state=open]_&]:rotate-180" />
    </div>
  );
}