/**
 * [INPUT]: 依赖 react 的 Fragment、styles/v4/base.css 的 .zzm-inklink（基色 inherit + 悬停变墨伪类——
 *   项上【禁写内联 color】，内联会压死 :hover；基灰 #8B8B85 由本组件 nav 容器提供、按钮继承）
 * [OUTPUT]: 对外提供 Breadcrumb 组件——层级轨迹导航（面包屑）：灰字可点 · `/` 分隔 · 末项墨色加粗为当前页
 * [POS]: components/v4 的共享导航原语，视觉循 AdmDesign「08 · 导航」样张（12px · 项 #8B8B85 · 分隔 #C6C6C0 ·
 *   当前项 #161616/600）。哑组件只收 items=[{label, onClick?}]——轨迹由各屏自己组（course/cmap·ovw·series·node、
 *   video 工具条、account/fav·hist、AdmDesign 08 节陈列）；有 onClick 渲染为可点 button（hover 变墨），
 *   无 onClick（含 null 项过滤后）渲染为当前页（aria-current="page"）。默认 flexWrap:'wrap' 自动折行；
 *   窄处（video 工具条）由调用方 style 传 flexWrap:'nowrap' + overflow:'hidden'，逐项省略号收缩。
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */
import { Fragment } from 'react'

// 逐项可收缩省略：nowrap 场景下每项按剩余空间均摊收缩，绝不撑破容器
const itemText = {
  minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: '20px',
}

export function Breadcrumb({ items = [], style }) {
  const list = items.filter(Boolean)
  if (!list.length) return null
  return (
    <nav aria-label="面包屑" style={{
      display: 'flex', alignItems: 'center', gap: 8, minWidth: 0,
      fontSize: 12, color: '#8B8B85', flexWrap: 'wrap', ...style,
    }}>
      {list.map((it, i) => (
        <Fragment key={i}>
          {i > 0 ? <span aria-hidden="true" style={{ flex: 'none', color: '#C6C6C0' }}>/</span> : null}
          {it.onClick ? (
            <button type="button" onClick={() => it.onClick()} className="zzm-inklink" style={{
              ...itemText, border: 0, background: 'transparent', padding: '4px 0', cursor: 'pointer',
              fontFamily: 'inherit', fontSize: 'inherit', textAlign: 'left',
            }}>{it.label}</button>
          ) : (
            <span aria-current="page" style={{ ...itemText, color: '#161616', fontWeight: 600 }}>{it.label}</span>
          )}
        </Fragment>
      ))}
    </nav>
  )
}