import React from 'react'
import PropTypes from 'prop-types'
import {
  applyTextStyles,
  selectSystemProps,
  useThemeTokens,
  getTokensPropType
} from '@telus-uds/components-base'
import styled from 'styled-components'
import { htmlAttrs } from '../utils'

const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])

const StyledDisclaimer = styled.p(({ fontName, fontWeight, fontSize, ...tokens }) => {
  const { fontFamily } = applyTextStyles({ fontName, fontWeight })
  return {
    fontSize: `${fontSize}px`,
    fontFamily,
    ...tokens
  }
})

/**
 * Use Disclaimer to display singular legal statement and must be displayed
 * immediately adjacent to the related, originating content.
 */
const Disclaimer = React.forwardRef(({ children, ...rest }, ref) => {
  const themeTokens = useThemeTokens('Disclaimer')
  return (
    <StyledDisclaimer ref={ref} {...selectProps(rest)} {...themeTokens}>
      {children}
    </StyledDisclaimer>
  )
})

Disclaimer.displayName = 'Disclaimer'

Disclaimer.propTypes = {
  ...selectedSystemPropTypes,
  tokens: getTokensPropType('Disclaimer'),
  children: PropTypes.node.isRequired
}

export default Disclaimer