"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabBar = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const Flex_1 = require("../Flex");
const Text_1 = require("../Text");
const Icon_1 = require("../Icon");
const ActiveTab = (0, styled_components_1.default)(Flex_1.Flex)(({ theme, separator }) => (Object.assign({}, (separator
    ? {
        padding: `0 ${theme.GAP.xs} 0 0`,
        borderRight: `2px solid ${theme.COLOR.gray4}`,
    }
    : {}))));
const ActiveTextLink = styled_components_1.default.a(({ theme }) => ({
    textDecoration: 'none',
    color: theme.COLOR.gray1,
    cursor: 'pointer',
}));
const ActiveText = (0, styled_components_1.default)(Text_1.Text)(({ theme, isActive }) => ({
    whiteSpace: 'nowrap',
    borderRadius: '100px',
    padding: theme.GAP.xs,
    backgroundColor: isActive ? theme.COLOR.gray5 : 'transparent',
    '&:hover': {
        backgroundColor: theme.COLOR.gray5,
    },
}));
const Item = ({ text, url, icon, isActive, separator, onClick, }) => {
    return ((0, jsx_runtime_1.jsx)(ActiveTab, Object.assign({ variant: "raw", justify: "center", align: "center", margin: "0 xs 0 0", separator: separator }, { children: (0, jsx_runtime_1.jsx)(ActiveTextLink, Object.assign({}, (url ? { href: url } : { onClick }), { children: (0, jsx_runtime_1.jsxs)(ActiveText, Object.assign({ variant: "span", format: "b2", color: "gray1", isActive: isActive }, { children: [icon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { variant: "basic", icon: icon, size: "24px", margin: "0 s 0 0", color: isActive ? 'gray.1' : 'gray.2' }, void 0)), (0, jsx_runtime_1.jsx)(Text_1.Text, Object.assign({ variant: "span", format: "b2m", color: isActive ? 'gray.1' : 'gray.2' }, { children: text }), void 0)] }), void 0) }), void 0) }), void 0));
};
const TabBarComponent = (_a) => {
    var { tabs, variant = 'raw', justify = 'start', align = 'end', dir = 'row' } = _a, props = __rest(_a, ["tabs", "variant", "justify", "align", "dir"]);
    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, Object.assign({ variant: variant, justify: justify, align: align, dir: dir }, props, { children: tabs.map((t) => ((0, jsx_runtime_1.jsx)(Item, Object.assign({}, t), t.id))) }), void 0));
};
exports.TabBar = Object.assign(TabBarComponent, {
    Item,
});
//# sourceMappingURL=TabBar.js.map