"use client";

import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import { FormLayoutIcon } from "../icons";
import { BreadcrumbItem, BreadcrumbList } from "../ui/breadcrumb";

export const Breadcrumb = () => {
  const [, setCurrentPage] = useState<React.Key>("");
  const pathname = usePathname();
  const pathnameSplit = pathname.split("/");
  pathnameSplit.shift();
  const pathnameTransformed = pathnameSplit.map((item) => {
    const words = item.split("-");
    const capitalizedWords = words.map(
      (word) => word.charAt(0).toUpperCase() + word?.slice(1)
    );
    return capitalizedWords.join(" ");
  });

  console.log("pathname : ", pathnameTransformed);

  useEffect(() => {
    setCurrentPage(pathnameSplit[pathnameSplit.length - 1]);
  }, [pathnameSplit]);

  return (
    <>
      <div className=" h-[100px] gap-0 grid rounded-lg border-small m-1 md:m-0 md:ml-4">
        <div className="mx-2 md:px-6 ">
          <div className="flex flex-row  justify-between items-center">
            <div className="pt-1  w-full">
              <p className="text-2xl font-semibold mb-2">
                {pathnameTransformed[pathnameTransformed.length - 1]}
              </p>
              <BreadcrumbList>
                {pathnameTransformed?.map((item, index) => (
                  <BreadcrumbItem key={pathnameSplit[index]}>
                    {item}
                  </BreadcrumbItem>
                ))}
              </BreadcrumbList>
            </div>
            <div className="pt-2">
              <FormLayoutIcon width={50} height={50} />
            </div>
          </div>
        </div>
      </div>
    </>
  );
};