<template>
  <div class="input-with-label">
    <label class="input-with-label__label">{{ label }}</label>
    <input
      :value="value"
      :placeholder="placeholder"
      data-cy="input-with-label-input"
      class="skillbox-input"
      @input="$emit('input', $event.target.value)"
    />
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: '',
    },
    label: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '',
    },
  },
};
</script>

<style scoped lang="scss">
@import '~styles/helpers';

.input-with-label {
  display: flex;
  flex-direction: column;
  &__label {
    @include regular-text;
    margin-bottom: $small-spacing;
  }
}
</style>
