"use client";
import { usePathname } from "next/navigation";
import React from "react";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { appNavigator } from "@/app.config";
import { cn } from "@/lib/utils";

function NavigationBreadcrumbs() {
  const pathname = usePathname();
  return (
    <Breadcrumb>
      <BreadcrumbList>
        {appNavigator.map(({ label, path }, idx) => (
          <div key={path} className="flex items-center gap-2">
            <BreadcrumbItem>
              <BreadcrumbLink
                className={cn(
                  pathname === path.replace(/\/#/g, "") && "text-foreground"
                )}
                href={path}
              >
                {" "}
                {label}
              </BreadcrumbLink>
            </BreadcrumbItem>
            {idx + 1 < appNavigator.length && (
              <BreadcrumbSeparator>
                <span>/</span>
              </BreadcrumbSeparator>
            )}
          </div>
        ))}
      </BreadcrumbList>
    </Breadcrumb>
  );
}

export default NavigationBreadcrumbs;
