import { Styled } from 'uxui-modules/view-container'
import { Image } from 'atoms/Image'
import { Label, Heading } from 'atoms/Text'

const ProductImage = styled.withComponent(Image) `
  flex: 0 0 50%;
`

const InformationBox = styled.div `
  display: flex;
  flex: 0 0 50%;
  flex-direction: column;
`

const DeliveryDateContainer = styled.div ``

const DeilveryDateLabel = styled.withComponent(Label) `
  color: #009944;
`

const DeliveryDateWrapper = styled.div `
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 16px;
`

const DeliveryDateText = styled.withComponent(Heading) `
  font-size: 20px;
  color: #2c2c2c;
  margin: 0;
`

const ChangeDateLabel = styled.withComponent(Label) `
  color: #159fd5;
  font-size: 16px;
`

const Wrapper = styled.section `
  display: flex;
`

export {
  ProductImage,
  InformationBox,
  Wrapper,
  DeliveryDateContainer,
  DeilveryDateLabel,
  DeliveryDateWrapper,
  DeliveryDateText,
  ChangeDateLabel,
}