<template>
  <div class="modal-input">
    <input
      :placeholder="placeholder"
      :class="{'skillbox-input--error': error}"
      :value="value"
      class="modal-input__inputfield skillbox-input"
      @input="$emit('input', $event.target.value)">
    <div
      class="modal-input__error"
      v-if="error">
      Für Inhaltsblöcke muss zwingend ein Titel erfasst werden.
    </div>
  </div>
</template>

<script>
  export default {
    props: ['value', 'error', 'placeholder']
  };
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";
  @import "@/styles/_functions.scss";

  .modal-input {
    &__inputfield {
      width: $modal-input-width;
    }

    &__error {
      font-family: sans-serif;
      font-size: toRem(14px);
      color: $color-accent-3-dark;
      padding: 10px 0;
    }
  }
</style>
