import React from 'react'

export default function Breadcrumbs({ items = [] }) {
  return (
    <nav className="text-sm text-zinc-400" aria-label="Breadcrumb">
      <ol className="flex flex-wrap items-center gap-1.5">
        {items.map((item, i) => (
          <React.Fragment key={i}>
            {i > 0 && (
              <li aria-hidden="true" className="text-zinc-600">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" className="inline-block">
                  <path d="M6 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </li>
            )}
            <li>
              {item.href ? (
                <a href={item.href} className="hover:text-zinc-200 transition-colors">
                  {item.label}
                </a>
              ) : (
                <span className="text-zinc-200">{item.label}</span>
              )}
            </li>
          </React.Fragment>
        ))}
      </ol>
    </nav>
  )
}