'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback } from 'react';
import { Label } from '@gravity-ui/uikit';
import { block } from "../../../utils/cn.js";
import "./Tabs.css";
const b = block('tabs');
export const Tabs = (props) => {
    const { items, activeId, onSelectItem, onDeleteItem, allowDelete = false, className, style, qa, } = props;
    const handleTabClick = useCallback((id) => {
        if (onSelectItem) {
            onSelectItem(id);
        }
    }, [onSelectItem]);
    const handleDeleteClick = useCallback((id) => {
        if (onDeleteItem) {
            onDeleteItem(id);
        }
    }, [onDeleteItem]);
    return (_jsx("div", { className: b(null, className), style: style, "data-qa": qa, children: items.map((item) => {
            const isActive = item.id === activeId;
            return (_jsx(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));
        }) }));
};
//# sourceMappingURL=Tabs.js.map
