import { styled } from 'view-container'
import ActionButtonGroup from 'presets/Order/ActionButtonGroup'
import { PaymentSummaryWrapper } from '../Order/PaymentSummary'
import OrderStatus from './OrderStatus'
import ProductItem from './ProductItem'

const StyledOrderStatus = styled.withComponent(OrderStatus) `
  border-bottom: 1px solid #d8d8d8;
  padding-bottom: 20px;
`
const StyledProductItem = styled.withComponent(ProductItem) `
  padding: 20px 0px;
`

const PaymentSummaryContainer = styled.div `
  display: flex;
  padding: 20px 0px;
  @media (min-width: 768px) {
    border-bottom: 1px solid #a6afc1;
  }

  ${PaymentSummaryWrapper} {
    flex: 1;
  }
`

const StyledActionButtonGroup = styled.withComponent(ActionButtonGroup) `
  ${props =>
    props.isExpand &&
    styled.css `
      display: none;
    `}
`

const FooterContainer = styled.div ``

export {
  StyledOrderStatus,
  StyledProductItem,
  PaymentSummaryContainer,
  FooterContainer,
  StyledActionButtonGroup,
}