import { styled } from 'styleh-components'
import { Link } from 'atoms/Link'
import {
  DetailedListItemPanel,
  DetailedListLabel,
  DetailedListValue,
} from 'molecules/DetailedList'
import { SalePrice } from 'presets/ProductPieces/ProductPrice'
import {
  StyledItemPrice,
  StyledProductDetails,
  StyledDetailedList,
  StyledProductName,
  StyledBrandName,
} from '../CheckoutCartBundle/ProductItem/styled'

const StyledLink = styled.withComponent(Link) `
  text-decoration: none;
`

const StyledImageLink = styled.withComponent(StyledLink) `
  display: flex;
  flex: 0 0 118px;

  figure {
    flex: 0 0 118px;
  }
`
const ItemPrice = styled.withComponent(StyledItemPrice) `
  align-items: center;
  flex-direction: row;

  ${SalePrice} {
    margin-bottom: 0;
    margin-right: rem(16);
  }
  @phone-or-smaller() {
    padding-left: 0;
  }
`
const ProductDetails = styled.withComponent(StyledProductDetails) `
  flex: 1;
`

const ProductOptions = styled.withComponent(StyledDetailedList) `
  margin-bottom: rem(8);
  ${DetailedListItemPanel} {
    &:last-child {
      display: none;
    }
  }
  ${DetailedListValue}, ${DetailedListLabel} {
    @tablet-or-smaller() {
      font-size: rem(16);
    }
  }
`

const ProductName = styled.withComponent(StyledProductName) `
  @tablet-or-smaller() {
    font-size: rem(16);
  }
`

const BrandName = styled.withComponent(StyledBrandName) `
  @tablet-or-smaller() {
    font-size: rem(16);
  }
`

export {
  StyledLink,
  StyledImageLink,
  ItemPrice,
  ProductDetails,
  ProductOptions,
  ProductName,
  BrandName,
}