import { styled } from 'styleh-components'
import { H5, H4, H2 } from '@skava/ui/dist/components/atoms/Text'
import { ImageWithLink } from '@skava/ui/dist/components/molecules/ImageWithLink'
import { Link } from '@skava/ui/dist/components/atoms/Link'
import { Image } from '@skava/ui/dist/components/atoms/Image'

const SalePrice = styled(H4)`
  font-weight: 600;
  font-size: rem(18);
  margin: 0;
  margin-right: rem(8);
  color: var(--color-red);
`
const RegularPrice = styled(H5)`
  text-decoration: line-through;
  font-size: rem(16);
  font-weight: normal;
  margin: 0;
`

const StyledProductPrice = styled.div`
  display: flex;
  align-items: center;
`

const Favorite = styled.div`
  display: flex;
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
  padding: rem(10);
`

const StyledProductImage = styled(Image)`
  display: flex;
  justify-content: center;
  align-items: center;
`

const StyledLink = styled(Link)`
  text-decoration: none;
  color: var(--color-dark-grey);
`

const StyledProductDescription = styled.p`
  margin: 0 0 rem(16) 0;
`

const StyledProductBrandName = styled(H2)`
  margin: 0 0 rem(4) 0;
  font-size: rem(18);
`

const StyledProductName = styled(H4)`
  margin: 0 0 rem(16) 0;
  font-size: rem(16);
  font-weight: normal;
`

const DetailsContainer = styled.div`
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  width: 0%;
  padding: rem(16);
  background: #fff;
  transition: 0.4s all ease-in-out;
`

const StyledWrapper = styled.div`
  position: relative;

  &:hover {
    ${DetailsContainer} {
      opacity: 1;
      width: 50%;
      transition: 0.4s;
    }
  }
`

export {
  SalePrice,
  RegularPrice,
  Favorite,
  StyledLink,
  StyledProductPrice,
  StyledProductName,
  StyledProductBrandName,
  StyledProductDescription,
  StyledProductImage,
  DetailsContainer,
  StyledWrapper,
}