import { Tab } from "@headlessui/react";
import "./index.scss";
import Downloaded from "./components/Downloaded";
import Downloading from "./components/Downloading";
import { useTranslation } from "react-i18next";

export default function DownloadView() {
  const { t } = useTranslation();

  return (
    <div
      id="page-container"
      className="page-container download-view--container"
    >
      <Tab.Group>
        <Tab.List className="tab-list-container">
          <Tab as="div" className="tab-list-item">
            {t("common.downloaded")}
          </Tab>
          <Tab as="div" className="tab-list-item">
            {t("common.downloading")}
          </Tab>
        </Tab.List>
        <Tab.Panels className={"tab-panels-container"}>
          <Tab.Panel className="tab-panel-container">
            <Downloaded></Downloaded>
          </Tab.Panel>
          <Tab.Panel className="tab-panel-container">
            <Downloading></Downloading>
          </Tab.Panel>
        </Tab.Panels>
      </Tab.Group>
    </div>
  );
}
