<template>
  <div :class="classNames">
    <div class="Counter__in">
      <slot/>
    </div>
  </div>  
</template>

<script>
import getClassName from '../../helpers/getClassName';
import classnames from '../../lib/classnames'

const baseClassName = getClassName('Counter');

export default {
  computed: {
    classNames () { 
      return classnames(baseClassName, {
        [`Counter--${this.type}`]: this.type
      })
    }
  },
  props: {
    type: {
      type: String,
      default: 'secondary',
      validator: v => ['secondary', 'primary', 'prominent'].indexOf(v) >= 0
    }
  }
}
</script>

<style>
@import '../../styles/common.css';
</style>

