import React__default, { useState, useEffect } from 'react';
import { B as Button } from './index-f71a880f.js';
import styled from '@emotion/styled';

const StyledContainer = styled.div `
  display: flex;
  align-items: center;
  gap: 8px;
  button[data-color='tertiary'] {
    background: white;
  }
`;

const BtnChoice = ({ value: valueInit, choices, className, onChange, }) => {
    const [value, setValue] = useState(valueInit);
    useEffect(() => {
        setValue(valueInit);
    }, [valueInit]);
    return (React__default.createElement(StyledContainer, { className: className }, choices.map((i, idx) => (React__default.createElement(Button, { dataEventCategory: i.dataEventCategory, dataEventAction: i.dataEventAction, dataEventLabel: i.dataEventLabel, size: "sm", variant: i.value === value ? 'primary' : 'tertiary', className: i.value === value ? 'btn-choice-selected' : '', key: idx, onClick: () => {
            setValue(i.value);
            onChange === null || onChange === void 0 ? void 0 : onChange(i.value);
        } }, i.label || '')))));
};

export { BtnChoice as B };
