import { cn } from './cva'

export interface BreadcrumbItem {
  label: string
  href?: string
  onClick?: () => void
}

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

export function Breadcrumbs({ items, separator = '/', className }: BreadcrumbsProps) {
  if (items.length === 0) return null

  return (
    <nav aria-label="Breadcrumb" className={cn('flex items-center gap-1 text-sm', className)}>
      <ol className="flex items-center gap-1 list-none m-0 p-0">
        {items.map((item, index) => {
          const isLast = index === items.length - 1

          return (
            <li key={index} className="flex items-center gap-1">
              {index > 0 && <span className="text-fg-muted">{separator}</span>}
              {item.href ? (
                <a
                  href={item.href}
                  aria-current={isLast ? 'page' : undefined}
                  className="text-fg-muted hover:text-fg transition-colors"
                >
                  {item.label}
                </a>
              ) : item.onClick ? (
                <button
                  type="button"
                  onClick={item.onClick}
                  aria-current={isLast ? 'page' : undefined}
                  className="text-fg-muted hover:text-fg transition-colors cursor-pointer bg-transparent border-none p-0"
                >
                  {item.label}
                </button>
              ) : (
                <span aria-current="page" className="text-fg font-medium">{item.label}</span>
              )}
            </li>
          )
        })}
      </ol>
    </nav>
  )
}