'use client';
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tabs = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const uikit_1 = require("@gravity-ui/uikit");
const cn_1 = require("../../../utils/cn.js");
require("./Tabs.css");
const b = (0, cn_1.block)('tabs');
const Tabs = (props) => {
    const { items, activeId, onSelectItem, onDeleteItem, allowDelete = false, className, style, qa, } = props;
    const handleTabClick = (0, react_1.useCallback)((id) => {
        if (onSelectItem) {
            onSelectItem(id);
        }
    }, [onSelectItem]);
    const handleDeleteClick = (0, react_1.useCallback)((id) => {
        if (onDeleteItem) {
            onDeleteItem(id);
        }
    }, [onDeleteItem]);
    return ((0, jsx_runtime_1.jsx)("div", { className: b(null, className), style: style, "data-qa": qa, children: items.map((item) => {
            const isActive = item.id === activeId;
            return ((0, jsx_runtime_1.jsx)(uikit_1.Label, { size: "s", theme: isActive ? 'info' : 'clear', interactive: true, onClick: () => handleTabClick(item.id), type: allowDelete ? 'close' : 'default', onCloseClick: allowDelete ? () => handleDeleteClick(item.id) : undefined, icon: item.icon, className: b('tab', { active: isActive }), "data-qa": `${qa}-tab-${item.id}`, children: item.title }, item.id));
        }) }));
};
exports.Tabs = Tabs;
//# sourceMappingURL=Tabs.js.map
