'use strict';

var React = require('react');
var index = require('./index-3d563586.js');
var styled = require('@emotion/styled');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);

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

const BtnChoice = ({ value: valueInit, choices, className, onChange, }) => {
    const [value, setValue] = React.useState(valueInit);
    React.useEffect(() => {
        setValue(valueInit);
    }, [valueInit]);
    return (React__default["default"].createElement(StyledContainer, { className: className }, choices.map((i, idx) => (React__default["default"].createElement(index.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 || '')))));
};

exports.BtnChoice = BtnChoice;
