import React from 'react'
import { styled } from 'styleh-components'
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 eh = Text

const OfferLabel = styled.withComponent(Text)`
  color: var(--color-red);
  font-size: .6875rem;
`
const StyledRatings = styled.withComponent(Ratings)`
  margin: 5px 0;
  ${TotalRatings} {
    font-size: .8125rem;
  }
`
const ButtonContainer = styled.div`
  margin-top: 5px;
  width: 100%;
  display: flex;
  justify-content: space-between;
`
const FavouriteButton = styled.div`
  order: 1;
`
const AddtoCartButton = styled.div`
  order: 2;
`

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