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

const SkeletonImage = React.forwardRef(
  (
    {
      rounded,
      imgHeight,
      size,
      sizeIndex,
      // Size automatically from image height, unless any size prop is passed in
      sizePixels = !(size || sizeIndex) ? imgHeight : undefined,
      show,
      children
    },
    ref
  ) => {
    if (!show) {
      return children
    }

    const shape = rounded !== 'circle' ? 'box' : rounded
    return (
      <Skeleton size={size} sizePixels={sizePixels} sizeIndex={sizeIndex} shape={shape} ref={ref} />
    )
  }
)

SkeletonImage.displayName = 'SkeletonImage'

SkeletonImage.propTypes = {
  imgHeight: PropTypes.number,
  rounded: PropTypes.oneOf(['circle', 'corners']),
  size: Skeleton.propTypes?.size,
  sizeIndex: Skeleton.propTypes?.sizeIndex,
  sizePixels: Skeleton.propTypes?.sizePixels,
  show: PropTypes.bool.isRequired,
  children: PropTypes.node
}

export default SkeletonImage