import { styled } from 'styleh-components'
import {
  ShippingMethodOption,
  DeliveryInstruction,
} from 'abstractions/Checkout'
import { SingleShipping } from 'abstractions/Checkout/GuestUser'
import { ProductItem } from 'abstractions/ProductPieces'

const StyledProductItem = styled.withComponent(ProductItem)`
  margin-bottom: rem(72);
`
const StyledShippingAddress = styled.withComponent(SingleShipping)`
  margin-bottom: rem(44);
`
const StyledShippingMethod = ShippingMethodOption

const StyledDeliveryInstruction = styled.withComponent(DeliveryInstruction)`
  margin-bottom: rem(16);
`

const Wrapper = styled.section`
  position: relative;
`

export {
  StyledProductItem,
  StyledShippingAddress,
  StyledShippingMethod,
  StyledDeliveryInstruction,
  Wrapper,
}