import { DocumentLike } from "iconsax-react";
import { FC } from "react";
import { useTranslation } from "react-i18next";
import { useLocation } from "react-router-dom";
import { Pages } from "../../config/Pages";
import SubMenuItem from "./SubMenuItem";

const ContentSubMenu: FC = () => {
  const location = useLocation();
  const { t } = useTranslation("global");

  const isActive = (name: string) => location.pathname.includes(name);

  return (
    <div className="py-12">
      <div className="flex gap-3 items-center border-b pb-10 px-6">
        <DocumentLike
          size={24}
          color="#000"
          variant="Bold"
        />
        <div className="text-xs">{t("sidebar.mnage_content")}</div>
      </div>

      <div className="flex flex-col mt-10 gap-4">
        <SubMenuItem
          title={t("submenu.blog_list")}
          isActive={isActive("/blog/list") || isActive("/blog/detail") || isActive("/blog/create")}
          link={Pages.blog.list}
          activeName="blogs"
        />
        <SubMenuItem
          title={t("submenu.learning_list")}
          isActive={isActive("/learning/list") || isActive("/learning/detail") || isActive("/learning/create")}
          link={Pages.learning.list}
          activeName="learnings"
        />
        <SubMenuItem
          title={t("submenu.blog_comments")}
          isActive={isActive("/blog/comments")}
          link={Pages.blog.comments}
          activeName="blogs"
        />
        <SubMenuItem
          title={t("submenu.blog_category")}
          isActive={isActive("/blog/category")}
          link={Pages.blog.category}
          activeName="blogs"
        />
        <SubMenuItem
          title={t("sidebar.ads")}
          isActive={isActive("ads")}
          link={Pages.ads.list}
          activeName="advertisements"
        />
        <SubMenuItem
          title={t("submenu.learning_category")}
          isActive={isActive("/learning/category")}
          link={Pages.learning.category}
          activeName="learnings"
        />
        <SubMenuItem
          title={t("sidebar.announcement")}
          isActive={isActive("announcement")}
          link={Pages.announcement.list}
          activeName="announcements"
        />
        <SubMenuItem
          title={t("sidebar.sliders")}
          isActive={isActive("sliders")}
          link={Pages.sliders.list}
          activeName="blogs"
        />
      </div>
    </div>
  );
};

export default ContentSubMenu;
