import React from 'react'
import { isEmpty } from 'exotic'
import { FigureProps } from './typings'
import Empty from 'atoms/Empty'
import Image from 'atoms/Image'
import { FigureCaption, StyledImage } from './styled'

/**
 * used to render figure caption
 */
function renderCaption(props: FigureProps) {
  const { caption } = props
  if (isEmpty(caption) === false) {
    return <FigureCaption>{caption}</FigureCaption>
  } else {
    return <Empty />
  }
}

function renderFigureImage(props: FigureProps) {
  const { alt, doAutoAlign, height, renderImage, src, width } = props
  return (
    <StyledImage
      doAutoAlign
      width={width}
      height={height}
      renderImage={renderImage}
      src={src}
      alt={alt}
    />
  )
}

export { renderCaption, renderFigureImage }