import React from 'react'
import { TextPlaceholder, ImagePlaceholder } from 'atoms/Placeholder'
import { FigureWrapper } from './styled'
import { FigurePlaceholderProps } from './typings'

/**
 * used to render figure caption
 */
function renderCaption(props: FigurePlaceholderProps) {
  return <TextPlaceholder />
}

function renderFigureImage(props: FigurePlaceholderProps) {
  const { height, width } = props
  return <ImagePlaceholder width={width} height={height} />
}

function renderWrapper(props: FigurePlaceholderProps) {
  const { className, children } = props
  const passthroughProps = Object.freeze({
	className,
    'data-qa': props['data-qa']
  })
  return <FigureWrapper {...passthroughProps}>{children}</FigureWrapper>
}

export { renderCaption, renderFigureImage, renderWrapper }