export function UnderlineTabs({ tabs, active, onChange }) {
return (
<div className="flex gap-6 border-b border-slate-200">
{tabs.map((tab) => (
<button
key={tab}
onClick={() => onChange(tab)}
className={`relative pb-3 text-sm font-medium transition
${active === tab ? "text-slate-900" : "text-slate-400 hover:text-slate-600"}`}
>
{tab}
{active === tab && (
<span className="absolute -bottom-px left-0 h-0.5 w-full bg-indigo-600" />
)}
</button>
))}
</div>
);
}