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

import { Fragment } from "react";
import { Link } from "react-router-dom";
import { ChevronRight } from "lucide-react";

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

export interface BreadcrumbsProps {
  items: BreadcrumbItem[];
}

export default function Breadcrumbs({ items }: BreadcrumbsProps) {
  return (
    <nav
      aria-label="Breadcrumb"
      className="flex items-center text-sm text-slate-500"
    >
      <Link
        to="/"
        aria-label="Home"
        className="flex items-center transition hover:text-[#10B981]"
      >
        {/* <Home className="h-4 w-4" /> */}
        Dashboard
      </Link>

      {items.map((item, i) => {
        const isLast = i === items.length - 1;

        return (
          <Fragment key={`${item.label}-${i}`}>
            <ChevronRight className="mx-2 h-4 w-4 text-slate-300" />

            {item.href && !isLast ? (
              <Link to={item.href} className="transition hover:text-[#10B981]">
                {item.label}
              </Link>
            ) : (
              <span
                aria-current={isLast ? "page" : undefined}
                className="font-medium text-slate-900"
              >
                {item.label}
              </span>
            )}
          </Fragment>
        );
      })}
    </nav>
  );
}