edr-platform/apps/edr-freight-web/backoffice/src/components/ui/Breadcrumbs.tsx

import { Anchor, Breadcrumbs as MantineBreadcrumbs, Text } from "@mantine/core";
import { ChevronRight } from "lucide-react";
import { Link } from "react-router-dom";

export interface BreadcrumbItem {
  label: string;
  href?: string;
}

export interface BreadcrumbsProps {
  items: BreadcrumbItem[];
}

export default function Breadcrumbs({ items }: BreadcrumbsProps) {
  // The dashboard root is always the first crumb; callers pass only the trail
  // beyond it.
  const crumbs: BreadcrumbItem[] = [{ label: "Dashboard", href: "/" }, ...items];

  return (
    <MantineBreadcrumbs
      separator={<ChevronRight size={14} aria-hidden />}
      separatorMargin="xs"
      styles={{
        root: { flexWrap: "wrap", rowGap: 4 },
        separator: { color: "var(--mantine-color-edr-muted-5)" },
      }}
    >
      {crumbs.map((item, index) => {
        const isLast = index === crumbs.length - 1;

        if (item.href && !isLast) {
          return (
            <Anchor
              key={`${item.label}-${index}`}
              component={Link}
              to={item.href}
              size="sm"
              c="dimmed"
            >
              {item.label}
            </Anchor>
          );
        }

        return (
          <Text
            key={`${item.label}-${index}`}
            size="sm"
            fw={isLast ? 600 : 400}
            c={isLast ? "edr-text" : "dimmed"}
            aria-current={isLast ? "page" : undefined}
          >
            {item.label}
          </Text>
        );
      })}
    </MantineBreadcrumbs>
  );
}