import React from "react";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";

function BreadNavigator({
  links,
  className,
}: {
  links: { label: string; href: string }[];
  className?: string;
}) {
  const labelClass =
    "w-full max-w-52 overflow-hidden text-ellipsis whitespace-nowrap capitalize block";
  return (
    <Breadcrumb className={className}>
      <BreadcrumbList>
        {links.map(({ label, href }, idx) => {
          if (idx < links.length - 1)
            return (
              <React.Fragment key={href}>
                <BreadcrumbItem className="">
                  <BreadcrumbLink className={labelClass} href={href}>
                    {label}
                  </BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator />
              </React.Fragment>
            );
          return (
            <BreadcrumbItem className={labelClass} key={href}>
              <BreadcrumbPage>{label}</BreadcrumbPage>
            </BreadcrumbItem>
          );
        })}
      </BreadcrumbList>
    </Breadcrumb>
  );
}

export default BreadNavigator;
