import { styled } from 'view-container'
import Image, { ImageElement } from 'atoms/Image'
import Text from 'atoms/Text'
import Ratings, { TotalRatings } from 'molecules/Ratings'

const ProductItemWrapper = styled.div`
  width: 200px;
  padding: 10px;
  position: relative;
`
const ProductImage = styled.withComponent(Image) `
  height: 228px;

  ${ImageElement} {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
  }
`
const ProductTitle = styled.withComponent(Text) `
  margin: 10px 0px;
  font-size: .8125rem;
`
const ProductPricePanel = styled.div`
  display: flex;
  flex-direction: column;
`

const RegularPrice = styled.withComponent(Text) `
  text-decoration: line-through;
  color: grey;
  font-size: .6875rem;
  &:after {
    content: ' Original'
  }
`
const SalePrice = styled.withComponent(Text) `
  /* margin-left: 5px; */
  font-weight: bold;
  font-size: .8125rem;
  &:after {
    content: ' SALE'
  }
`

const OfferLabel = styled.withComponent(Text) `
  color: red;
  font-size: .6875rem;
`
const StyledRatings = styled.withComponent(Ratings) `
  margin: 5px 0;
  ${TotalRatings} {
    font-size: .8125rem;
  }
`
const FavouriteButton = styled.div`
  position: absolute;
  top: 10px;
  left: 10px;
`
const AddtoCartButton = styled.div`
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: grey;
  padding: 10px;
  border-radius: 50%;
  width: 40px;
  height: 40px;
`

export {
  ProductItemWrapper,
  ProductImage,
  ProductTitle,
  ProductPricePanel,
  RegularPrice,
  SalePrice,
  StyledRatings,
  FavouriteButton,
  AddtoCartButton,
  OfferLabel,
}