/**
 * Switch:一组互斥的文字切换(状态 / 模式)。
 *
 * 原位于 pages/matches/ui.tsx,上移到 UI 层 —— 它用的是全站统一的
 * `.tab` / `.tab-on` 语言(方角、印报红下划线),属通用组件。
 *
 * 注:内部的 <button> 不在 `.btn` 体系内(用 `.tab`),属有意保留的自定义样式。
 */

export function Switch({ value, onChange, items }: {
  value: string
  onChange: (v: string) => void
  items: { v: string; label: string; title?: string }[]
}) {
  return (
    <span className="inline-flex items-center gap-2.5">
      {items.map((it, i) => (
        <span key={it.v} className="inline-flex items-center gap-2.5">
          {i > 0 && <span className="text-ink-300" aria-hidden="true">/</span>}
          <button
            onClick={() => onChange(it.v)}
            title={it.title}
            className={`relative tab ${value === it.v ? 'tab-on' : ''} text-xs`}
          >
            {it.label}
          </button>
        </span>
      ))}
    </span>
  )
}