import React from 'react'
import PropTypes from 'prop-types'
import { Skeleton } from '@telus-uds/components-base'

const SkeletonTypography = React.forwardRef(
  ({ show, size, sizeIndex, sizePixels, characters, lines, children }, ref) => {
    if (!show) {
      return children
    }

    return (
      <Skeleton
        size={size}
        sizeIndex={sizeIndex}
        sizePixels={sizePixels}
        characters={characters}
        lines={lines}
        ref={ref}
      />
    )
  }
)

SkeletonTypography.displayName = 'SkeletonTypography'

SkeletonTypography.propTypes = {
  show: PropTypes.bool.isRequired,
  children: PropTypes.node,
  size: Skeleton.propTypes?.size,
  sizeIndex: Skeleton.propTypes?.sizeIndex,
  sizePixels: Skeleton.propTypes?.sizePixels,
  characters: Skeleton.propTypes?.characters,
  lines: Skeleton.propTypes?.lines
}

export default SkeletonTypography