// components/Breadcrumbs.tsx
import React, { ReactElement } from "react"
import { ChevronRight } from "lucide-react"

import { cn } from "../../design-lib/utils"
import Stack from "../molecules/stack"

interface BreadcrumbsProps {
  children: React.ReactNode
}

interface BreadcrumbsItemProps {
  last?: boolean
  active?: boolean
  onClick?: () => void
  children: React.ReactNode
  disabled?: boolean
}

const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ children }) => {
  const childArray = React.Children.toArray(children) as ReactElement[]

  return (
    <Stack
      as="nav"
      className="text-muted-foreground "
      row
      gap={2}
      aria-label="Breadcrumb"
    >
      {React.Children.map(childArray, (child, index) => {
        return React.cloneElement(child, {
          last: index === childArray.length - 1,
        })
      })}
    </Stack>
  )
}

const BreadcrumbsItem: React.FC<BreadcrumbsItemProps> = ({
  last,
  active,
  onClick,
  children,
  disabled,
}) => {
  return (
    <Stack row alignCenter>
      <div
        role="button"
        onClick={onClick}
        onKeyDown={(e) => e.key === "Enter" && onClick?.()}
        className={cn(
          "cursor-pointer px-2 py-1 text-sm duration-200   ease-in-out hover:text-foreground",
          `${active ? "text-foreground" : ""}`,
          "focus-within:text-foreground focus:outline-none",
          { "pointer-events-none text-muted-foreground": disabled }
        )}
        aria-current={active ? "page" : undefined}
      >
        {children}
      </div>
      {!last && <ChevronRight className={"text-muted-foreground"} size={16} />}
    </Stack>
  )
}

export { Breadcrumbs, BreadcrumbsItem }