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

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

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

export {
  StyledProductItem,
  StyledShippingAddress,
  StyledShippingMethod,
  StyledDeliveryInstruction,
}