import { styled } from 'styleh-components'
import Image, { ImageElement } from '@skava/ui/dist/components/atoms/Image'
import Text from '@skava/ui/dist/components/atoms/Text'
import Ratings from 'presets/Ratings'

const ProductItemWrapper = styled.div`
  width: 100%;
  padding: 10px;
  position: relative;
`
const ProductImage = styled.withComponent(Image)`
  height: 228px;
  width: 100%;
  background-color: #EFEFEF;
  margin-bottom:10px;

  ${ImageElement} {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: auto;
    max-width: 100%;
    max-height:100%;
  }
`
const StyledProductTitle = styled.withComponent(Text)`
  margin: 5px 0px;
  font-size: 1rem;
  color: #6D707F;
`
const ProductDescription = styled.withComponent(Text)`
  margin: 5px 0px;
  font-size: 1rem;
  color: #6D707F;
`
const ProductBrand = styled.withComponent(Text)`
  margin: 5px 0px;
  font-size: 1rem;
  color: #000;
  font-weight: bold;
`
const ProductPricePanel = styled.div`
  display: flex;
  flex-direction: row;
  margin: 5px 0px;
`

const PromoLabel = styled.withComponent(Text)`
 margin: 5px 0px;
`

const RegularPrice = styled.withComponent(Text)`
  text-decoration: line-through;
  padding-left: rem(4);
`
const SalePrice = styled.withComponent(Text)`
  font-weight: bold;
`

const StyledRatings = styled.withComponent(Ratings)`
  margin: 5px 0;
`
const ProductInfoWrapper = styled.div``

export {
  ProductItemWrapper,
  ProductImage,
  StyledProductTitle,
  ProductBrand,
  ProductDescription,
  ProductPricePanel,
  PromoLabel,
  RegularPrice,
  SalePrice,
  StyledRatings,
  ProductInfoWrapper,
}