tsms/src/components/Breadcrumb/Breadcrumb.tsx

"use client";

import Breadcrumbs from "@mui/material/Breadcrumbs";
import Typography from "@mui/material/Typography";
import Link from "next/link";
import MUILink from "@mui/material/Link";
import { usePathname } from "next/navigation";
import { useTranslation } from "react-i18next";

const pathToLabelMap: { [path: string]: string } = {
  "": "Overview",
  "/home": "User Workspace",
  "/projects": "Projects",
  "/projects/create": "Create Project",
  "/tasks": "Task Template",
  "/tasks/create": "Create Task Template",
  "/customer": "Customer",
  "/customer/create": "Create Customer",
  "/settings": "Settings",
  "/company": "Company",
  "/settings/department": "Department",
  "/settings/department/new": "Create Department",
  "/settings/position": "Position",
  "/settings/position/new": "Create Position",
  "/settings/salarys": "Salary",
};

const Breadcrumb = () => {
  const pathname = usePathname();
  const segments = pathname.split("/");

  // const { t } = useTranslation("customer");

  return (
    <Breadcrumbs>
      {segments.map((segment, index) => {
        const href = segments.slice(0, index + 1).join("/");
        const label = pathToLabelMap[href] || segment;

        if (index === segments.length - 1) {
          return (
            <Typography key={index} color="text.primary">
              {label}
              {/* {t(label)} */}
            </Typography>
          );
        } else {
          return (
            <MUILink
              underline="hover"
              color="inherit"
              key={index}
              component={Link}
              href={href || "/"}
            >
              {label}
            </MUILink>
          );
        }
      })}
    </Breadcrumbs>
  );
};

export default Breadcrumb;