<template>
  <div class="page-form-input">
    <label
      :for="id"
      class="page-form-input__label">{{ label }}</label>
    <component
      :is="type"
      :class="classes"
      :value.prop="value"
      :data-cy="cyId"
      :id="id"
      @input="$emit('input', $event.target.value)"/>
  </div>
</template>

<script>
  export default {
    props: {
      label: {
        type: String
      },
      type: {
        type: String,
        default: 'input'
      },
      value: {
        type: String
      }
    },

    data() {
      return {
        id: null
      };
    },

    computed: {
      classes() {
        return `page-form-input__${this.type} skillbox-${this.type}`;
      },
      cyId() {
        return `page-form-input-${this.label.toLowerCase()}`;
      }
    },

    created() {
      this.id = this._uid;
    },
  };
</script>

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

  .page-form-input {
    &__label {
      @include page-form-input-heading;
    }

    &__input, &__textarea {
      width: 100%;
      margin-bottom: $large-spacing;
    }
  }
</style>
