/**
 * [INPUT]: 依赖 extracted.css 的 .zzm-tab（悬停提墨 + 焦点光晕）、tokens.css 的 --zzm-accent
 * [OUTPUT]: 对外提供 Tabs 组件——下划线标签页：当前项墨色 600 + 2px 朱色下划线，其余灰字 450
 * [POS]: src/extracted 的导航控件，1:1 提炼自 edu AdmDesign「08 · 导航」样张。
 *   朱色下划线就是这一屏的「你在这里」——同屏不再用第二处朱色做装饰
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */

const ACCENT = 'var(--zzm-accent, #A6402F)'

export function Tabs({ items = [], value = 0, onChange, label = '标签页' }) {
  return (
    <div role="tablist" aria-label={label} style={{ display: 'flex', gap: 24, borderBottom: '1px solid rgba(0,0,0,.09)' }}>
      {items.map((n, i) => {
        const on = i === value
        return (
          <button
            key={n}
            type="button"
            role="tab"
            aria-selected={on}
            onClick={() => onChange?.(i)}
            className="zzm-tab"
            style={{
              padding: '8px 2px 10px', border: 0, background: 'transparent', cursor: 'pointer', fontFamily: 'inherit',
              fontSize: 13, fontWeight: on ? 600 : 450, color: on ? '#161616' : '#8B8B85',
              borderBottom: `2px solid ${on ? ACCENT : 'transparent'}`, marginBottom: -1,
            }}
          >{n}</button>
        )
      })}
    </div>
  )
}