import { styled } from 'styleh-components'
import { Figure, FigureCaption, StyledImage } from 'molecules/Figure'

const StyledFigure = styled.withComponent(Figure)`
  position: relative;
  background: #d8d8d8;

  ${StyledImage} {
    width: auto;
  }

  ${FigureCaption} {
    position: absolute;
    left: 0;
    bottom: rem(16);
    padding: rem(4) rem(8);
    color: #fff;
    font-size: rem(14);
    min-width: rem(94);
  }

  ${props => props && props.captionColor && styled.css`
    ${FigureCaption} {
      background: ${props.captionColor};
    }
  `}
`

export { StyledFigure }