import React from 'react';
import './fields.css';

export type ButtonSetOption = {
  value: string;
  label: string;
};

type ButtonSetProps = {
  label?: string;
  description?: string;
  options: ButtonSetOption[];
  value: string;
  onChange: (value: string) => void;
};

export const ButtonSet: React.FC<ButtonSetProps> = ({ label, description, options, value, onChange }) => {
  return (
    <div className="ips-field-group">
      {label && <div className="ips-field-label">{label}</div>}
      <div role="group" className="ips-field-buttonset">
        {options.map((opt, idx) => {
          const active = opt.value === value;
          return (
            <button
              key={opt.value}
              type="button"
              onClick={() => onChange(opt.value)}
              className={`ips-field-buttonset__btn${active ? ' is-active' : ''}${
                idx < options.length - 1 ? ' has-divider' : ''
              }`}
            >
              {opt.label}
            </button>
          );
        })}
      </div>
      {description && <div className="ips-field-description">{description}</div>}
    </div>
  );
};