import React from "react";
import { useTranslation } from "react-i18next";
import { WalletIcon, UsersFourIcon, BuildingsIcon, UsersThreeIcon, GraduationCapIcon, PathIcon, TranslateIcon, } from "@phosphor-icons/react";
import * as Tab from "@radix-ui/react-tabs";
import { useRootElement } from "../context";
import * as styles from "./styles";
import { AVAILABLE_TABS } from "~/sdks/LocalDemographics/constants";
export const tabIcons = {
    income: WalletIcon,
    population: UsersFourIcon,
    housing: BuildingsIcon,
    household: UsersThreeIcon,
    education: GraduationCapIcon,
    commute: PathIcon,
    languages: TranslateIcon,
};
export const Tabs = () => {
    const { t } = useTranslation("localDemographics");
    const { options } = useRootElement();
    let activeCategories = AVAILABLE_TABS;
    if (options.omitTabs) {
        activeCategories = AVAILABLE_TABS.filter((category) => { var _a; return !((_a = options.omitTabs) === null || _a === void 0 ? void 0 : _a.includes(category)); });
    }
    return (React.createElement(Tab.List, { className: styles.tabsList, "aria-label": "Demographics tabs" }, activeCategories.map((tab) => {
        const isActive = tab === options.activeTab;
        const Icon = tabIcons[tab];
        return (React.createElement(React.Fragment, { key: tab },
            React.createElement(Tab.Trigger, { "data-active": isActive, className: styles.trigger, value: tab },
                React.createElement(Icon, { className: styles.icon }),
                React.createElement("p", { className: styles.tabText }, t(`data.${tab}.title`)))));
    })));
};
//# sourceMappingURL=index.js.map