import React from "react";
import { Button } from "@local-logic/core/ui";
import * as RTabs from "@radix-ui/react-tabs";
import useTranslator from "~/hooks/useTranslator";
import { translations as poiTranslations } from "~/localization/translation-packs/pois";
import { useRootElement } from "../context";
import * as S from "./styles";

export const Tabs = () => {
  const { include, activeTab, setActiveTab } = useRootElement();
  const { translations } = useTranslator([poiTranslations]);

  if (include.length <= 1) {
    return null;
  }

  return (
    <RTabs.List aria-label="tabs example">
      {include.map((poiGroup) => (
        <S.Trigger key={poiGroup} value={poiGroup} asChild>
          <Button
            size="small"
            variant={poiGroup === activeTab ? "contained" : "outlined"}
            onClick={() => setActiveTab(poiGroup)}
          >
            {translations[poiGroup]}
          </Button>
        </S.Trigger>
      ))}
    </RTabs.List>
  );
};