// src/components/ui/Breadcrumbs.jsx
// Standalone breadcrumb trail. Use on detail pages below the page title.
// PageHeader has breadcrumbs built-in; use this component when you need
// breadcrumbs independently of PageHeader.
//
// Props:
//   items     — Array<{ label: string, href?: string }>
//               Last item is always rendered as current page (no link).
//   className — extra classes on the <nav> element

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

const ChevronSep = () => (
  <svg
    width="12"
    height="12"
    viewBox="0 0 12 12"
    fill="none"
    stroke="currentColor"
    strokeWidth="1.5"
    strokeLinecap="round"
    strokeLinejoin="round"
    aria-hidden="true"
    className="breadcrumbs-sep"
    style={{ flexShrink: 0 }}
  >
    <path d="M4 2l4 4-4 4" />
  </svg>
)

export default function Breadcrumbs({ items = [], className = '' }) {
  if (!items.length) return null

  return (
    <nav aria-label="Breadcrumb" className={`breadcrumbs ${className}`}>
      {items.map((item, i) => {
        const isLast = i === items.length - 1
        return (
          <span key={i} className="contents">
            {i > 0 && <ChevronSep />}
            {isLast || !item.href ? (
              <span
                className="breadcrumbs-current"
                aria-current={isLast ? 'page' : undefined}
              >
                {item.label}
              </span>
            ) : (
              <Link to={item.href}>{item.label}</Link>
            )}
          </span>
        )
      })}
    </nav>
  )
}
