import { styled } from 'styleh-components'
import { Label } from 'atoms/Text/Label'
import { StyledCircleFillPath } from 'atoms/Icons/RadioIcon'
import {
  Header,
  ToggleItemIconWrapper,
} from 'molecules/ToggleList'
import { OptionsWrapper, ShippingMethodOption } from 'abstractions/Checkout/ShippingMethodOption'

const ToggleList = styled.withComponent(ShippingMethodOption) `
  ${Header} {
    font-size: rem(18);
  }
  ${ToggleItemIconWrapper} {
    align-self: baseline;
    margin-right: rem(20);
    ${StyledCircleFillPath} {
      fill: #169fd6;
      stroke: none;
    }
  }
`

const ShippingTypeLabel = styled.withComponent(Label) `
  font-weight: 500;
  margin-bottom: rem(4);
`
const ExpectedDeliveryText = styled.span `
  color: #65738e;
`
const StyledOptionsWrapper = styled.withComponent(OptionsWrapper) `
  display: flex;
  flex-direction: column;
  margin-bottom: rem(8);
`

export {
  ExpectedDeliveryText,
  ShippingTypeLabel,
  StyledOptionsWrapper,
  ToggleList,
}