import { h } from "@stencil/core";
import { BEM } from "../../../utils/bem";
import { ariaBooleanToString } from "../../../utils/aria";
import { toKebabCase } from "../../../utils/string";
export const TabControl = ({ value, items, containerId, onControlChange }) => {
    const block = BEM.block('carousel');
    const controls = block.element('controls');
    return (h("div", { class: Object.assign(Object.assign({}, controls.class()), controls.modifier('tabs').class()) }, h("bal-card", null, h("bal-card-content", { role: "tabs" }, items.map(item => (h("button", { class: {
            'button': true,
            'is-fullwidth': true,
            'is-primary': value === item.value,
            'is-light': value !== item.value,
        }, role: "tab", "aria-selected": ariaBooleanToString(value === item.value), "aria-controls": containerId + '-' + toKebabCase(item.label), key: item.value, onClick: () => onControlChange(item) }, item.label)))))));
};
