import { styled } from 'uxui-modules/view-container'
import { Button } from 'atoms/Button'
import { Heading, Text } from 'atoms/Text'
import { H3 } from 'atoms/Text/Heading'

const StyledLabel = styled.withComponent(H3) `
`

const StyledButton = styled.withComponent(H3) `
  cursor: pointer;
  color: #00a0db;
  text-transform: capitalize;
`
const ItemWrapper = styled.section `
  border: 1px solid #ccc;
  border-radius: 1px;
  margin-bottom: 1rem;
  padding: 1rem;
`
const IconWrapper = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
`
const NameOnCard = styled.withComponent(Heading)`
  margin:0;
  font-size: 18px;
`
const CardNumber = styled.withComponent(Heading) `
  margin:0;
  font-size: 18px;
`
const CardExpiry = styled.withComponent(Text)`
  font-size: 16px;
  margin-top: 5px;
`

export {
  StyledLabel,
  StyledButton,
  ItemWrapper,
  IconWrapper,
  CardNumber,
  CardExpiry,
  NameOnCard,
}