 styles = require './CreditCard.stylus'
 textStyles = require '../Text/Text.stylus'
 
+{ Brand, Placeholder, NumberPattern } = require './constants'
+helpers = require './helpers'
+
+ensureProps = (props) ->
+  return {
+    name: props.name or Placeholder.NAME
+    exp_month: props.exp_month or Placeholder.EXP_MONTH
+    exp_year: props.exp_year or Placeholder.EXP_YEAR
+    brand: props.brand or Brand.DEFAULT
+    number: props.number or ''
+  }
+
 module.exports = CreditCard = (props) ->
 
-  { brand, number, name, exp_year, exp_month } = props
-
-  exp_month or= CreditCard.defaultProps.exp_month
-  exp_year or= CreditCard.defaultProps.exp_year
+  { brand, number, name, exp_year, exp_month } = ensureProps props
 
   <Box className={styles.main}>
     <Row className={styles.header}>

  </Box>

CreditCard.defaultProps =
  brand: 'visa'
  number: ''
  exp_month: 'MM'
  exp_year: 'YY'
  name: 'A koding user'


CardIcon = ({ brand }) -> <div className={styles["brand-#{brand}"]} />


CardNumber = ({ number, brand, reverse }) ->

  blocks = helpers.getNumberBlocks number, brand

  children = blocks.map (block, index) ->
    <Label key={index} monospaced size='medium' type='secondary'>{block}</Label>

  <div className={styles.number}>{children}</div>


CardName = ({ name }) ->
  <Label monospaced size='small' type='secondary'>{name}</Label>


CardDate = ({ month, year }) ->
