interface SectionHeaderProps {
  icon: string;
  title: string;
  desc: string;
  action?: React.ReactNode;
}
export default function SectionHeader({ icon, title, desc, action }: SectionHeaderProps) {
  return (
    <div className="flex items-start justify-between mb-5">
      <div className="flex items-center gap-3">
        <div className="w-10 h-10 rounded-xl flex items-center justify-center text-white flex-shrink-0" style={{ background: '#b828a0' }}>
          <i className={`${icon} text-lg`}></i>
        </div>
        <div>
          <h2 className="text-base font-bold text-gray-800">{title}</h2>
          <p className="text-xs text-gray-500">{desc}</p>
        </div>
      </div>
      {action && <div>{action}</div>}
    </div>
  );
}