import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
import { cs, filterUndefined } from '../utils'
import { TProps } from './t.types'

export const TBase = styled.spanBox`
  transition-duration: fast;
`

/** Displays given text and allows easy styling. */
export const T = vui<'span', TProps>((props, ref) => {
  const { align, casing, centerV, children, className, decoration, text, weight, ...rest } = omitThemingProps(props)
  const styles = useStyleConfig('T', props)

  const aliasedProps = filterUndefined({
    alignItems: centerV ? 'center' : undefined,
    display: centerV ? 'inline-flex' : undefined,
    fontWeight: weight,
    textAlign: align,
    textDecoration: decoration,
    textTransform: casing,
  })

  return (
    <TBase className={cs('vui-t', className)} ref={ref} {...styles} {...aliasedProps} {...rest}>
      {children ?? text}
    </TBase>
  )
})

T.displayName = 'T'

export default T
