import { Link } from 'react-router-dom'

export interface BreadcrumbItem {
  label: string
  href?: string
}

export function Breadcrumbs({ items }: { items: BreadcrumbItem[] }) {
  if (items.length === 0) return null

  return (
    <nav aria-label="Breadcrumb" className="study-breadcrumbs">
      <ol className="study-breadcrumbs-list">
        {items.map((item, idx) => {
          const isLast = idx === items.length - 1
          return (
            <li key={idx} className="study-breadcrumbs-item">
              {!isLast && item.href ? (
                <Link to={item.href} className="study-breadcrumbs-link">
                  {item.label}
                </Link>
              ) : (
                <span className="study-breadcrumbs-current" aria-current={isLast ? 'page' : undefined}>
                  {item.label}
                </span>
              )}
              {!isLast && (
                <span className="study-breadcrumbs-sep" aria-hidden="true"> › </span>
              )}
            </li>
          )
        })}
      </ol>
    </nav>
  )
}