import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import "./style.scss";
import clsx from "clsx";
const Tabs = ({ tabs, onSelect, selectedTab, dataCyArray = [], children, }) => {
    const getClassName = (className, tab) => {
        return clsx({
            [`${className}--Generic`]: true,
            [`${className}--Active`]: selectedTab === tab,
        });
    };
    const formatCount = (count) => {
        if (count === 0) {
            return "";
        }
        return count.toString().padStart(2, "0");
    };
    return (_jsxs("div", { className: "tabs", children: [_jsx("div", { className: "tabsNav", children: tabs.map((tab, index) => (_jsxs("button", { className: getClassName("tabsNavItem", tab.title), onClick: () => onSelect(tab.title), "data-cy": dataCyArray[index] ?? "", children: [tab.title, Boolean(tab.count) && (_jsx("p", { className: getClassName("tabsNavItem-Number", tab.title), children: formatCount(tab.count ?? 0) }))] }, tab.id))) }), children] }));
};
export default Tabs;
