import { jsxs, jsx } from 'react/jsx-runtime';
import classNames from '../../_virtual/index.js';
import Typography from '../Typography/Typography.js';
import Icon from '../Icon/Icon.js';

const Tabs = ({ variant = 'default', tabsData, activeTabId, onTabClick, noBorder = false, noPadding = false, titleSize = '12px', isBorderBottomLine = false, isHoverBackground = false, isBorderRadius = false, tabFlexSpacing = 'flex-start', }) => {
    return (jsxs("div", { className: `ff-tabs-container`, children: [jsx("div", { className: classNames(`ff-tab-row--${variant} ff-tab-row-spacing--${tabFlexSpacing}`, {
                    'ff-tab-row--no-border': noBorder,
                    'ff-tab-row--no-padding': noPadding,
                    'ff-tab-row--borderBottomLine': isBorderBottomLine,
                }), children: tabsData.map((tab) => (jsxs("button", { onClick: () => !tab.disabled && onTabClick(tab.id), disabled: tab.disabled, className: classNames(`ff-tab-button--${variant}`, {
                        disabled: tab.disabled,
                        active: activeTabId === tab.id,
                        'ff-tab-button-bg': isHoverBackground,
                    }), children: [jsxs("div", { className: "label-count-section", children: [jsx(Typography, { children: tab.label, fontSize: titleSize, lineHeight: "18px", fontWeight: activeTabId === tab.id ? 'semi-bold' : 'regular', color: activeTabId === tab.id
                                        ? 'var(--tabs-label-active-color)'
                                        : 'var(--tabs-label-default-color)', className: classNames('ff-tab-label', {
                                        'ff-tab-label--active': activeTabId === tab.id,
                                    }) }), variant === 'default' && tab.count !== undefined && (jsx("span", { className: classNames('tab-count', {
                                        'tab-count--active': activeTabId === tab.id,
                                    }), children: tab.count })), tab.icon && (jsx(Icon, { name: tab.icon, className: classNames('ff-tab-icon', {
                                        'ff-tab-icon--active': activeTabId === tab.id,
                                    }) }))] }), jsx("div", { className: classNames('ff-tab-bar', {
                                'ff-tab-bar--active': activeTabId === tab.id,
                                'ff-tab-bar--radius-4': isBorderRadius,
                                'ff-tab-bar--radius-2': !isBorderRadius,
                            }) }), jsx("span", { className: `ff-defaultStatus ${tab.status === 'success'
                                ? 'ff-successStatus'
                                : tab.status === 'error'
                                    ? 'ff-dangerStatus'
                                    : ''}` })] }, tab.id))) }), jsx("div", { className: `ff-tab-content`, children: tabsData.find((tab) => tab.id === activeTabId)?.component })] }));
};

export { Tabs as default };
//# sourceMappingURL=Tabs.js.map
