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

export const PBase = styled.pBox`
  transition-duration: fast;
`

/** Displays a paragraph of text. */
export const P = vui<'p', PProps>((props, ref) => {
  const { align, casing, children, className, decoration, text, weight, ...rest } = omitThemingProps(props)
  const styles = useStyleConfig('P', props)

  const aliasedProps = filterUndefined({
    fontWeight: weight,
    textAlign: align,
    textDecoration: decoration,
    textTransform: casing,
  })

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

P.displayName = 'P'
export default P
