import { useStyleConfig, vui } from '../core'
import type { TProps } from '../t'
import T from '../t'
import { cs } from '../utils'
import { useSwitchContext } from './context'

/** Displays label text within the Switch component. */
export const SwitchLabel = vui<'span', TProps>((props, ref) => {
  const { className, ...rest } = props
  const styles = useStyleConfig('Switch', useSwitchContext())

  // <T> has xs but not xl
  if (styles.label.size === 'xl') {
    rest.fontSize = 20
  }

  return <T className={cs('vui-switchLabel', className)} display="flex" ref={ref} {...styles.label} {...rest} />
})

SwitchLabel.displayName = 'SwitchLabel'

export default SwitchLabel
