/* -------------------------------------------------------------------------- */
/*                                  Libraries                                 */
/* -------------------------------------------------------------------------- */
import React from "react";
import { useTranslation } from "react-i18next";
/* -------------------------------------------------------------------------- */
/*                                    Icons                                   */
/* -------------------------------------------------------------------------- */
import { ReactComponent as SVGUserIcon } from "assets/svg/user.svg";
import { ReactComponent as SVGShieldIcon } from "assets/svg/shield.svg";
import { ReactComponent as SVGServicesIcon } from "assets/svg/services.svg";
/* -------------------------------------------------------------------------- */
/*                                    Types                                   */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/*                                 Components                                 */
/* -------------------------------------------------------------------------- */
import SideNavItem from "./SideNavItem";

/* -------------------------------------------------------------------------- */
/*                         SideNav top-level component                        */
/* -------------------------------------------------------------------------- */
type Props = {
  collapsed: boolean;
};

export default function SideNav({ collapsed }: Props) {
  const { t } = useTranslation();

  return (
    <div className="space-y-1">
      <SideNavItem
        collapsed={collapsed}
        icon={<SVGServicesIcon className="w-full h-full stroke-white" />}
        caption={t("sidemenu.dashboard")}
        to="/"
      />
      <SideNavItem
        collapsed={collapsed}
        icon={<SVGUserIcon className="w-full h-full stroke-white" />}
        caption={t("sidemenu.account")}
        to="/personal-information"
      />
      <SideNavItem
        collapsed={collapsed}
        caption={t("sidemenu.security")}
        icon={<SVGShieldIcon className="w-full h-full stroke-white" />}
        to="/security"
      />
      <SideNavItem
        collapsed={collapsed}
        caption={t("sidemenu.services")}
        icon={<SVGServicesIcon className="w-full h-full stroke-white" />}
        to="/services"
      />
    </div>
  );
}