<template>
  <div class="subtitle-form">
    <input-with-label
      :value="text"
      class="subtitle-form__input"
      data-cy="subtitle-form-input"
      label="Text"
      placeholder="z.b. Vor dem Lesen"
      @input="$emit('change-text', $event)"
    />
  </div>
</template>

<script>
import InputWithLabel from '@/components/ui/InputWithLabel.vue';

export default {
  props: {
    value: {
      type: Object,
      default: null,
      validator(value) {
        return Object.prototype.hasOwnProperty.call(value, 'text');
      },
    },
    index: {
      type: Number,
      default: -1,
    },
  },
  components: { InputWithLabel },

  computed: {
    text() {
      return this.value.text;
    },
  },
};
</script>

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

.subtitle-form {
  &__input {
    width: 100%;
  }
}
</style>
