Segmented Button Group

export function SegmentedGroup({ options, value, onChange }) {
  return (
    <div className="inline-flex rounded-lg border border-slate-200 bg-slate-100 p-1">
      {options.map((opt) => (
        <button
          key={opt}
          onClick={() => onChange(opt)}
          className={`rounded-md px-4 py-1.5 text-sm font-medium transition
            ${value === opt ? "bg-white shadow text-slate-900" : "text-slate-500 hover:text-slate-700"}`}
        >
          {opt}
        </button>
      ))}
    </div>
  );
}