interface Option {
  value: string;
  label: string;
}

interface Props {
  options: Option[];
  value: string;
  onChange: (value: string) => void;
}

export default function Toggle({ options, value, onChange }: Props) {
  return (
    <div className="toggle">
      {options.map((opt) => (
        <button
          key={opt.value}
          className={`toggle-option ${opt.value === value ? "toggle-option-active" : ""}`}
          onClick={() => onChange(opt.value)}
          type="button"
        >
          {opt.label}
        </button>
      ))}
    </div>
  );
}