// import { cn } from "@/lib/utils";
// import { ChevronRightIcon } from "@radix-ui/react-icons";
// import Link from "next/link";
// import React from "react";

// type BreadCrumbType = {
//   title: string;
//   link: string;
// };

// type BreadCrumbPropsType = {
//   items: BreadCrumbType[];
// };

// export default function BreadCrumb({ items }: BreadCrumbPropsType) {
//   return (
//     <div className="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
//       <Link
//         href={"/dashboard"}
//         className="overflow-hidden text-ellipsis whitespace-nowrap"
//       >
//         Dashboard
//       </Link>
//       {items?.map((item: BreadCrumbType, index: number) => (
//         <React.Fragment key={item.title}>
//           <ChevronRightIcon className="h-4 w-4" />
//           <Link
//             href={item.link}
//             className={cn(
//               "font-medium",
//               index === items.length - 1
//                 ? "text-foreground pointer-events-none"
//                 : "text-muted-foreground",
//             )}
//           >
//             {item.title}
//           </Link>
//         </React.Fragment>
//       ))}
//     </div>
//   );
// }

import {
  Breadcrumb as BreadcrumbParent,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Fragment } from "react";

type BreadCrumbType = {
  title: string;
  link?: string;
};

type BreadCrumbPropsType = {
  items: BreadCrumbType[];
};

const Breadcrumb = ({ items }: BreadCrumbPropsType) => {
  return (
    <BreadcrumbParent>
      <BreadcrumbList>
        {items.map((item) => (
          <Fragment key={item.title}>
            {item.link ? (
              <>
                <BreadcrumbItem>
                  <BreadcrumbLink href={item.link}>{item.title}</BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator />
              </>
            ) : (
              <BreadcrumbItem>
                <BreadcrumbPage>{item.title}</BreadcrumbPage>
              </BreadcrumbItem>
            )}
          </Fragment>
        ))}
        {/* <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem> */}
      </BreadcrumbList>
    </BreadcrumbParent>
  );
};

export default Breadcrumb;