//* PACKAGES
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbList,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Link } from "@inertiajs/react";
//* THEME
import { cn } from "@/lib/utils";

export default function BreadcrumbsBase({
  className,
  breadcrumbs,
}: {
  className?: string;
  breadcrumbs?: Array<{
    title: string;
    url: string;
  }>;
}) {
  return (
    breadcrumbs && (
      <Breadcrumb className={cn(className)}>
        <BreadcrumbList>
          {breadcrumbs.map((breadcrumb, breadcrumbIndex) => (
            <ul
              key={`${breadcrumb.url}-${breadcrumbIndex}`}
              className="flex flex-wrap items-center gap-1 break-words [overflow-wrap:anywhere] sm:gap-2.5 min-w-0 max-w-full"
            >
              {breadcrumbIndex >= 1 && <BreadcrumbSeparator />}
              <BreadcrumbItem className="text-primary-foreground/70 min-w-0 break-words [overflow-wrap:anywhere] inline">
                {breadcrumbIndex !== breadcrumbs.length - 1 &&
                breadcrumb.url ? (
                  <Link
                    href={breadcrumb.url}
                    className="rounded-md text-primary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 break-words [overflow-wrap:anywhere]"
                  >
                    {breadcrumb.title}
                  </Link>
                ) : (
                  <span className="break-words [overflow-wrap:anywhere]">
                    {breadcrumb.title}
                  </span>
                )}
              </BreadcrumbItem>
            </ul>
          ))}
        </BreadcrumbList>
      </Breadcrumb>
    )
  );
}