import React from 'react'

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

export const Breadcrumb: React.FC<{ items: BreadcrumbItem[] }> = ({ items }) => {
  return (
    <nav className="flex items-center gap-1.5 text-xs" aria-label="breadcrumb">
      {items.map((item, index) => {
        const isLast = index === items.length - 1
        return (
          <React.Fragment key={index}>
            {index > 0 && <span className="text-slate-300">/</span>}
            {isLast ? (
              <span className="font-bold text-slate-900">{item.label}</span>
            ) : (
              <a
                href={item.href ?? '#'}
                className="text-slate-400 hover:text-slate-600 transition-colors"
              >
                {item.label}
              </a>
            )}
          </React.Fragment>
        )
      })}
    </nav>
  )
}