"use client";
import React from "react";
import { Link, usePathname, useRouter } from "@/components/navigation";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Icon } from "@/components/ui/icon";
import { ReactNode } from "react";

const SiteBreadcrumb = ({ children }: { children?: ReactNode }) => {
  const router = useRouter(); 

  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 />

            <BreadcrumbItem>
              <button
                onClick={() => router.back()}
                className="capitalize flex items-center gap-1"
              >
                Back
                <BreadcrumbSeparator />
              </button>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      </div>

      <div className="flex-none flex gap-2">{children}</div>
    </div>
  );
};

export default SiteBreadcrumb;

// 'use client';
// import React from 'react'
// import { Link, usePathname, useRouter } from "@/components/navigation";
// import {
//     Breadcrumb,
//     BreadcrumbEllipsis,
//     BreadcrumbItem,
//     BreadcrumbLink,
//     BreadcrumbList,
//     BreadcrumbPage,
//     BreadcrumbSeparator,
// } from "@/components/ui/breadcrumb"
// import { Icon } from "@/components/ui/icon"
// import { ReactNode } from "react";

// 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;