export default function Segmented({ items, active, onChange }) {
  return (
    <div className="flex gap-2 overflow-x-auto rounded-[8px] border border-line bg-surface p-2">
      {items.map((item) => (
        <button
          key={item}
          className={`shrink-0 rounded-full px-8 py-1.5 text-[13px]  transition ${
            active === item ? "bg-primary text-white shadow-[0_10px_24px_rgba(7,193,96,.22)]" : "text-muted hover:bg-surface2"
          }`}
          onClick={() => onChange(item)}
        >
          {item}
        </button>
      ))}
    </div>
  );
}
