import { styled } from 'styleh-components'
import { ShippingAddress } from 'src/forms/views'
import { ShippingMethodOption, DeliveryInstruction } from 'presets/Checkout'
import { ProductItem } from 'presets/ProductPieces'

const StyledProductItem = styled.withComponent(ProductItem).attrs({
  'data-qa': 'qa-product-container',
})`
  margin-bottom: rem(72);
`
const StyledShippingAddress = styled.withComponent(ShippingAddress)`
  margin-bottom: rem(44);
`
const StyledShippingMethod = styled.withComponent(ShippingMethodOption).attrs({
  dataQa: 'qa-shipping-methods-container',
})``

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

export {
  StyledProductItem,
  StyledShippingAddress,
  StyledShippingMethod,
  StyledDeliveryInstruction,
}