import type { ReactNode } from 'react'
import { Switch } from './Switch'
import { Text } from './Typography'
import styles from './ToggleRow.module.css'

/**
 * 开关行：左边一行说明文字，右边一个开关，两端对齐。
 *
 * 设置面板里「每行一个开关」的场景用它，比自己拼 `Space justify="between"` 更整齐。
 * 开关旁边没有文字标签时，`switchLabel` 必填（会进 aria-label）。
 */
export type ToggleRowProps = {
  /** 显示的标签 */
  label: ReactNode
  checked: boolean
  onChange: (checked: boolean) => void
  /** 屏幕阅读器读到的开关名称，默认取 label 的文本 */
  switchLabel?: string
  disabled?: boolean
  /** 标签下方的补充说明 */
  hint?: ReactNode
  className?: string
}

export function ToggleRow({
  label,
  checked,
  onChange,
  switchLabel,
  disabled = false,
  hint,
  className,
}: ToggleRowProps) {
  const accessibleLabel =
    switchLabel ?? (typeof label === 'string' ? label : '开关')

  return (
    <div className={[styles.root, className].filter(Boolean).join(' ')}>
      <span className={styles.text}>
        <Text>{label}</Text>
        {hint !== undefined && (
          <Text size="xs" tone="muted">
            {hint}
          </Text>
        )}
      </span>
      <Switch
        checked={checked}
        onChange={onChange}
        disabled={disabled}
        label={accessibleLabel}
      />
    </div>
  )
}