"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToggleButton = void 0;
const react_1 = __importDefault(require("react"));
const css_utilities_1 = require("@shopify/css-utilities");
const ToggleButtonGroup_css_1 = __importDefault(require("./ToggleButtonGroup.css"));
const hooks_1 = require("./hooks");
function ToggleButton({ id, children, }) {
    const { selectedItem, onChange } = hooks_1.useToggleButtons();
    const selected = selectedItem === id;
    return (<div className={css_utilities_1.classNames(ToggleButtonGroup_css_1.default.ToggleButton)}>
      <button type="button" aria-pressed={selected} onClick={() => {
        onChange(id);
    }} className={css_utilities_1.classNames(ToggleButtonGroup_css_1.default.Button, {
        [ToggleButtonGroup_css_1.default['Button-selected']]: selected,
    })}>
        {children}
      </button>
    </div>);
}
exports.ToggleButton = ToggleButton;