import { styled } from 'styleh-components'
import {
  ProductImage,
  ProductImageSection,
} from 'presets/ProductPieces'
import { H2, H3 } from 'atoms/Text'

const StyledProductImage = styled.withComponent(ProductImage).attrs({
  'data-qa': 'qa-image'
})`
  ${ProductImageSection} {
    background-color: transparent;
    width: 100%;
    height: rem(140);
  }
`

const LabelText = styled.withComponent(H3)`
  margin: 0;
  font-weight: normal;
  font-size: rem(14);
`

const DateText = styled.withComponent(H2)`
  margin: 0;
  font-size: rem(16);
`

export {
  StyledProductImage,
  DateText,
  LabelText,
}