"use client";
import React from "react";

import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { ReactNode } from "react";
import { usePathname } from "next/navigation";
import Link from "next/link";
import { Icon } from "./ui/icon";

const SiteBreadcrumb = ({ children }: { children?: ReactNode }) => {
  const location = usePathname();
  const locations = location.split("/").filter((path) => path);

  return (
    <div className="flex justify-between gap-3 items-center mb-6">
      <div className="flex-1">
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <Link href="/dashboard">
                <Icon icon="heroicons:home" className=" h-5 w-5" />
              </Link>
            </BreadcrumbItem>
            <BreadcrumbSeparator />

            {locations.map((link, index) => {
              let href = `/${locations.slice(0, index + 1).join("/")}`;
              let itemLink = link;
              const isLast = index === locations.length - 1;
              return (
                <React.Fragment key={index}>
                  <BreadcrumbItem className=" capitalize">
                    {isLast ? (
                      itemLink?.replaceAll("-", " ")
                    ) : (
                      <Link href={href}>{itemLink?.replaceAll("-", "")}</Link>
                    )}
                  </BreadcrumbItem>
                  {locations.length !== index + 1 && <BreadcrumbSeparator />}
                </React.Fragment>
              );
            })}
          </BreadcrumbList>
        </Breadcrumb>
      </div>
      <div className=" flex-none flex  gap-2">{children}</div>
    </div>
  );
};

export default SiteBreadcrumb;