import * as React from "react";

export interface SegOption<T extends string = string> {
  value: T;
  label: React.ReactNode;
}

export interface SegProps<T extends string = string> {
  options: SegOption<T>[];
  value: T;
  onChange: (value: T) => void;
  className?: string;
}

export function Seg<T extends string = string>({
  options,
  value,
  onChange,
  className,
}: SegProps<T>) {
  const classes = ["ads-seg"];
  if (className) classes.push(className);
  return (
    <div className={classes.join(" ")}>
      {options.map((opt) => (
        <button
          key={opt.value}
          type="button"
          className={opt.value === value ? "ads-seg__on" : undefined}
          onClick={() => onChange(opt.value)}
        >
          {opt.label}
        </button>
      ))}
    </div>
  );
}
