import './ModeSwitch.css'

function ModeSwitch({
  value = 'view',
  onChange,
  viewLabel = '浏览',
  editLabel = '编辑',
  options,
  ariaLabel = '模式切换',
}) {
  const finalOptions = options || [
    { label: viewLabel, value: 'view' },
    { label: editLabel, value: 'edit' },
  ]
  const activeIndex = Math.max(
    0,
    finalOptions.findIndex((item) => item.value === value)
  )

  return (
    <div
      className="mode-switch"
      role="tablist"
      aria-label={ariaLabel}
      style={{
        '--option-count': String(finalOptions.length),
        '--active-index': String(activeIndex),
      }}
    >
      <span className="mode-switch-thumb" aria-hidden="true" />
      {finalOptions.map((item) => (
        <button
          key={item.value}
          type="button"
          className={`mode-switch-option ${value === item.value ? 'active' : ''}`}
          aria-selected={value === item.value}
          onClick={() => onChange?.(item.value)}
        >
          {item.label}
        </button>
      ))}
    </div>
  )
}

export default ModeSwitch