'use client';
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator
} from '@/components/ui/breadcrumb';
import { useBreadcrumbs } from '@/hooks/use-breadcrumbs';
import Link from 'next/link';
import { Fragment } from 'react';

export function Breadcrumbs() {
  const items = useBreadcrumbs();
  if (items?.length === 0) return null;
  return (
    // <Breadcrumb>
    //   <BreadcrumbList>
    //     {items?.map((item, index) => (
    //       <Fragment key={item?.title}>
    //         {index !== items?.length - 1 && ( 
    //           <BreadcrumbItem className="hidden md:block">
    //             <BreadcrumbLink href={item?.link} onClick={(e)=>e.preventDefault()}>{item?.title}</BreadcrumbLink>
    //           </BreadcrumbItem>
    //         )}
    //         {index < items?.length - 1 && (
    //           <BreadcrumbSeparator className="hidden md:block">
    //           </BreadcrumbSeparator>
    //         )}
    //         {index === items?.length - 1 && (
    //           <BreadcrumbPage>{item?.title}</BreadcrumbPage>
    //         )}
    //       </Fragment>
    //     ))}
    //   </BreadcrumbList>
    // </Breadcrumb>
    <Breadcrumb>
      <BreadcrumbList>
        {items?.map((item, index) => (
          <Fragment key={item?.title}>
            {index !== items?.length - 1 && (
              <BreadcrumbItem className="hidden md:block">
                <Link href={item?.link} legacyBehavior>
                  <a>{item?.title}</a>
                </Link>
              </BreadcrumbItem>
            )}
            {index < items?.length - 1 && (
              <BreadcrumbSeparator className="hidden md:block">
                {/* <ChevronDownIcon /> */}
              </BreadcrumbSeparator>
            )}
            {index === items?.length - 1 && (
              <BreadcrumbPage>{item?.title}</BreadcrumbPage>
            )}
          </Fragment>
        ))}
      </BreadcrumbList>
    </Breadcrumb>
  );
}