<template>
  <div :class="classNames">
    <div v-if="$slots.title" class="FormStatus__title"><slot name="title"/></div>
    <div class="FormStatus__content"><slot/></div>
  </div>
</template>

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

const baseClassName = getClassName('FormStatus')

export default {
  data: () => ({}),
  computed: {
    classNames () {
      return classnames(baseClassName, `FormStatus--${this.state}`)
    }
  },
  props: {
    state: {
      type: String,
      required: false,
      default: 'default',
      validator: (v) => ['default', 'error'].indexOf(v) >= 0
    }
  }
}
</script>

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

