import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import './Tabs.scss';
import classNames from 'classnames';
import Typography from '../Typography';
import '../../assets/styles/_colors.scss';
import Icon from '../Icon';
const Tabs = ({ variant = 'default', tabsData, activeTabId, onTabClick, noBorder = false, noPadding = false, titleSize = '12px', 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,
                }), 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,
                    }), 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,
                            }) }), _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 default Tabs;
//# sourceMappingURL=Tabs.js.map