import { styled } from 'styleh-components'

const ImageWrapper = styled.div`
  position: relative;
  width: ${props => (props.width ? props.width : '100%')};
  height: ${props => (props.height ? props.height : '100%')};
`

// could be ImageDiv
const ImageBackground = styled.div.attrs({
  role: 'image',
})`
  ${props =>
    props.src &&
    styled.css`
      background: url(${props.src}) no-repeat;
      background-size: contain;
      background-position: center;
    `};
  width: ${props => props.width || '800px'};
  height: ${props => props.height || '300px'};
`

// <ImageElement nowrap={nowrap} />
const ImageElement = styled.img`
  ${props =>
    !props.doAutoAlign &&
    styled.css`
      width: 100%;
      height: auto;
    `};

  ${props =>
    props &&
    props.doAutoAlign &&
    styled.css`
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      max-width: 100%;
      max-height: 100%;
    `};
`
export { ImageWrapper, ImageBackground, ImageElement }