/* -------------------------------------------------------------------------- */
/*                                  Libraries                                 */
/* -------------------------------------------------------------------------- */
import React from "react";
import { useNavigate } from "react-router-dom";
import { Transition } from "@headlessui/react";
/* -------------------------------------------------------------------------- */
/*                                    Hooks                                   */
/* -------------------------------------------------------------------------- */
import { useTranslation } from "react-i18next";
/* -------------------------------------------------------------------------- */
/*                                 Components                                 */
/* -------------------------------------------------------------------------- */
import Button from "components/controls/Button";
/* -------------------------------------------------------------------------- */
/*                                    Icons                                   */
/* -------------------------------------------------------------------------- */
import { ReactComponent as SVGBackIcon } from "assets/svg/backstab.svg";
/* -------------------------------------------------------------------------- */
/*                                  Component                                 */
/* -------------------------------------------------------------------------- */

export default function GlobalControls() {
  /* ------------------------ // Navigation hook usage ------------------------ */
  const navigate = useNavigate();
  const {t} = useTranslation();
  /* -------------------------------- Component ------------------------------- */
  return (
    <>
      <Transition
        show={window.history.state?.idx !== 0}
        enter="transition-opacity duration-75"
        enterFrom="opacity-0"
        enterTo="opacity-100"
        leave="transition-opacity duration-100"
        leaveFrom="opacity-100"
        leaveTo="opacity-0"
      >
        <Button
          type="fill"
          variant="blue"
          onClick={() => navigate(-1)}
          className="font-bold"
          iconed
        >
          <div className="flex items-center space-x-3">
            <div className="flex-none w-6 h-6">
              <SVGBackIcon className="w-full h-full stroke-current opacity-60"/>
            </div>
            <div className="flex-1">{t('back')}</div>
          </div>
        </Button>
      </Transition>
    </>
  );
}