import { FC, useState } from "react";
import { useParams } from "react-router-dom";
import { Card } from "venice-ui";
import { Content, ContentWrapper } from "../../components/components";
import { Tabs } from "../../components/UI/Tabs";
import { dictionary } from "../../untils/dictionary";
import { t } from "../../helpers/userHelper";
import { EmailTemplates } from "./EmailTemplates";

export const Administration: FC = () => {
  const { tab } = useParams();
  const [activeTab, setActiveTab] = useState(tab || "email_templates");

  const administrationTabs = [
    {
      value: "email_templates",
      label: "Email templates",
    },
  ];

  return (
    <Content>
      <Card
        title={t(dictionary.administration)}
        shadow={false}
        componentHeight="calc(100vh - 4rem)"
        noVerticalPadding={true}
      >
        <ContentWrapper componentHeight="calc(100vh - 10.4rem)">
          <Tabs
            tabs={administrationTabs}
            activeValue={activeTab}
            onClick={setActiveTab}
          />
          <ContentWrapper componentHeight="calc(100vh - 14.4rem)">
            {activeTab === "email_templates" && <EmailTemplates />}
          </ContentWrapper>
        </ContentWrapper>
      </Card>
    </Content>
  );
};