import { OptionPanelProps } from '@components/DesignPanel/types';
import ButtonToggleGroup from '@components/ui/ButtonToggle';

export const ButtonGroup: React.FC<OptionPanelProps> = ({
  options,
  activeOptionValue,
  emitOptions,
  modifierId,
  display,
}: any) => {
  return (
    <div>
      {options && options.length ? (
        <ButtonToggleGroup
          size="small"
          display={display}
          defaultPressed={activeOptionValue}
          options={options.map((option: any) => ({
            label: option.label,
            value: option.value.toString(),
            icon: option?.icon,
          }))}
          onPressedChange={(value) => {
            emitOptions([
              {
                id: modifierId,
                value,
              },
            ]);
          }}
        />
      ) : (
        <span>No Options are defined</span>
      )}
    </div>
  );
};

export default ButtonGroup;