"use client";

import { Link, usePathname } from "@/shared/config/navigation";
import "./BreadCrumbs.scss";
import { useSearchParams } from "next/navigation";
import Image from "next/image";
import chevron from "./icons/chevron-right.svg";

interface IBreadcrumbsProps {
  homeRequired?: boolean;
}

const BreadCrumbs: React.FC<IBreadcrumbsProps> = ({
  homeRequired,
}: IBreadcrumbsProps) => {
  const pathname = usePathname();
  const query = useSearchParams().get("новость");
  const routes = pathname.split("/").filter((route) => route !== "");
  const tRoutes: Record<string, string> = {
    "about-us": "О нас",
    "create-report": "Написать обращение",
    news: "Новости",
    profile: "Профиль",
    "my-reports": "Мои обращения",
    personal: "Личные данные",
    report: "Обращение",
    "sign-in": "Войти в аккаунт",
    "forgot-password": "Восстановление пароля",
    "reset-code": "Сброс пароля",
    "sign-up": "Регистрация",
    "confirm-email": "Потверждение почты",
    statistics: "Статистика",
    volunteers: "Волонтеры",
  };
  return (
    <div className="breadcrumbs">
      {homeRequired && (
        <Link href="/">
          Главная <Image src={chevron} alt="Chevron Right Icon" />
        </Link>
      )}
      {routes.map((route, i, array) => {
        if (routes.length === 1 && routes[0] === "profile")
          return null;
        if (parseInt(route)) {
          if (routes[0] === "news") {
            return <span key={query}>{query}</span>;
          }
        }
        if (i === array.length - 1) {
          return <span key={route}>{tRoutes[route]}</span>;
        } else {
          return route === "report" ? (
            <span key={route}>{tRoutes[route]}</span>
          ) : (
            <Link key={route} href={`/${route}`}>
              {tRoutes[route]}
              <Image src={chevron} alt="Chevron Right Icon" />
            </Link>
          );
        }
      })}
    </div>
  );
};

export default BreadCrumbs;