<template>
  <component :is='tagName' v-bind="$attrs" :class="classNames">
    <slot/>
    <div class="FormField__border"/>
  </component>
</template>

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

const baseClassName = getClassName('FormField');

export default {
  props: {
    tagName: {
      type: String,
      default: 'div'
    },
    status: {
      type: String,
      required: false,
      default: 'default',
      validator: (v) => ['default', 'error', 'valid'].indexOf(v) >= 0
    }
  },
  computed: {
    classNames () {
      return classnames(baseClassName, {
        [`FormField--s-${this.status}`]: this.status !== 'default'
      })
    }
  }
}
</script>

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


