'use client'

import React from 'react'
import Link from 'next/link'
import { ChevronRight } from 'lucide-react'
import { cn } from '@/lib/utils'

interface BreadcrumbItem {
  label: string
  href?: string
}

interface BreadcrumbsProps {
  items: BreadcrumbItem[]
  separator?: React.ReactNode
  className?: string
}

const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
  items,
  separator,
  className,
}) => {
  const sep = separator ?? <ChevronRight className="h-3 w-3 text-text-faint" />

  return (
    <nav aria-label="Breadcrumb" className={cn('flex items-center', className)}>
      <ol className="flex items-center gap-1.5">
        {items.map((item, i) => {
          const isLast = i === items.length - 1

          return (
            <li key={item.label + i} className="flex items-center gap-1.5">
              {i > 0 && <span aria-hidden="true">{sep}</span>}
              {isLast || !item.href ? (
                <span
                  className={cn(
                    'text-sm',
                    isLast ? 'font-medium text-chalk' : 'text-text-faint'
                  )}
                  aria-current={isLast ? 'page' : undefined}
                >
                  {item.label}
                </span>
              ) : (
                <Link
                  href={item.href}
                  className="text-sm text-blush transition-colors hover:text-chalk"
                >
                  {item.label}
                </Link>
              )}
            </li>
          )
        })}
      </ol>
    </nav>
  )
}

export default Breadcrumbs

Prop	Type	Default	Description
`items`	`{ label: string; href?: string }[]`	`[]`	Array of breadcrumb items. The last item is rendered as current page.
`separator`	`React.ReactNode`	`<ChevronRight />`	Custom separator between breadcrumb items.
`className`	`string`	`''`	Additional CSS classes.