import { styled } from 'styleh-components'
import Image, { ImageElement } from 'atoms/Image'
import Text from 'atoms/Text'
import Button from 'atoms/Button'
import Ratings, { TotalRatings } from 'molecules/Ratings'
import SelectDropDown from 'molecules/SelectDropDown'

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

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

const RegularPrice = styled.withComponent(Text)`
  text-decoration: line-through;
  color: grey;
`
const SalePrice = styled.withComponent(Text)`
  /* margin-left: 5px; */
  font-weight: bold;
`

const OfferLabel = styled.withComponent(Text)`
  color: var(--color-red);
`
const StyledRatings = styled.withComponent(Ratings)`
  margin: 5px 0;
  ${TotalRatings} {
  }
`
const ButtonsPanel = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10px;
`

const FavouriteButton = styled.withComponent(Button)`
  background-color: var(--color-blue);
  color: white;
  border: 0px;
  border-radius: 4px;
`
const AddtoCartButton = styled.withComponent(Button)`
  background-color: var(--color-blue);
  color: white;
  border: 0px;
  border-radius: 4px;
`

const FacetsPanel = styled.div``
const StyledSelectDropDown = styled.withComponent(SelectDropDown)`
  margin-bottom: 10px;
`

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