import { styled } from 'view-container'
import { Button } from 'atoms/Button'
import { TextPlaceholder } from 'atoms/Placeholder'
import { Heading, Text, Label } from 'atoms/Text'
import { ButtonWithIcon } from 'presets/Buttons'

const PaymentEditCardWrapper = styled.div``
const PaymentCardIcon = styled.div`
  width: 76px;
  height: 48px;
`
const DefaultPaymentOption = styled.div`
  margin-top: 25px;
  flex: 1
  display: flex;
  align-items: center;
  svg:first-child {
    margin-right: 15px;
  }
`
const PaymentDetailsWrapper = styled.div`
  display: flex;
  flex: 0 0 40%;
  @media (max-width: 768px) {
    flex-direction: column
    flex: 0 0 40%
  }
`
const PaymentCardDetail = styled.div`
  margin-left: 8px;
  @media (max-width: 768px) {
    margin-left: 0px;
    margin-top: 15px;
  }
`
const PaymentEditHeader = styled.div`
  display: flex;
`
const PaymentEditButton = styled.div`
  display: flex;
  flex: 0 0 162px;
  justify-content: flex-end;
  
  span {
    margin: 0
  }
`
const PaymentEditFooter = styled.div`
  display: flex;
`
const PaymentRemoveButton = styled.div`
  display: flex;
  flex: 0 0 162px;
  justify-content: flex-end
  margin-top: 15px;

  span {
    margin: 0
  }
`
const CardTitle = styled.withComponent(Heading)`
  margin:0;
  font-size: 18px;
`
const CardExpiry = styled.withComponent(Text)`
  font-size: 16px;
  margin-top: 5px;
`
const BalanceElement = styled.div`
  display: flex;
  flex: 1

  @media (max-width: 768px) {
    flex-direction: column
  }
`

const GiftBalance = styled.withComponent(Text)`
  font-size: 18px;
  &:after {
    content: ":";
  }
`
const GiftAmount = styled.withComponent(Text)`
  margin-left: 10px;
  font-size: 18px;
  color: #009944

  @media (max-width: 768px) {
    margin-left: 0px;
  }
`
const MakeDefaultLabel = styled.withComponent(Label)`
  font-size: 16px;
`
const EditInfoButton = styled.withComponent(Button)`
  background: transparent;
  border: none;
  padding: 0
`
const RemoveButton = styled.withComponent(ButtonWithIcon)`
  background: #EFEFEF;
  border: none;
  height: 44px;
  padding: 0 30px;
  color: #5F6C88

  svg {
    fill: #5F6C88
  }
`



export {
  PaymentEditCardWrapper,
  PaymentCardIcon,
  DefaultPaymentOption,
  PaymentDetailsWrapper,
  PaymentCardDetail,
  PaymentEditHeader,
  PaymentEditButton,
  PaymentEditFooter,
  PaymentRemoveButton,
  CardTitle,
  CardExpiry,
  BalanceElement,
  GiftBalance,
  GiftAmount,
  MakeDefaultLabel,
  EditInfoButton,
  RemoveButton
}