"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const styles_1 = require("../../styles");
const theme_1 = require("../../styles/theme");
const Flex_1 = require("../Flex");
const Link_1 = require("../Link");
const LinkButton_1 = require("../LinkButton");
const Icon_1 = require("../Icon");
const Text_1 = require("../Text");
const ActiveText = styles_1.styled(Text_1.Text) `
  cursor: pointer;
  white-space: nowrap;
  background-color: ${({ isActive }) => isActive ? theme_1.theme.colors.gray[4] : 'transparent'};

  &:hover {
    background-color: ${theme_1.theme.colors.gray[4]};
  }
`;
const TabItem = ({ id, text, url, icon, isActive, separator, onClick, }) => {
    const Component = url ? Link_1.Link : LinkButton_1.LinkButton;
    return (react_1.default.createElement(Flex_1.Flex, { id: id, justifyContent: "center", alignItems: "center", mr: "8px", pr: separator ? '8px' : null, borderRight: separator ? `2px solid ${theme_1.theme.colors.gray[4]}` : null },
        react_1.default.createElement(Component, Object.assign({}, (url ? { href: url } : { onClick })),
            react_1.default.createElement(ActiveText, { variant: "b2", color: "gray.1", px: "8px", py: "8px", borderRadius: "100px", isActive: isActive },
                icon && (react_1.default.createElement(Icon_1.Icon, { Asset: icon, width: 24, height: 24, mr: "s", color: isActive ? 'gray.1' : 'gray.2' })),
                react_1.default.createElement(Text_1.Text, { variant: "b2m", color: isActive ? 'gray.1' : 'gray.2' }, text)))));
};
exports.default = TabItem;
//# sourceMappingURL=TabItem.js.map