<template>
  <div class="text-form-with-help-text">
    <h3 class="text-form-with-help-text__heading">
      <span class="text-form-with-help-text__title">{{ title }}</span>
      <helpful-tooltip :text="helpText" />
    </h3>
    <text-form
      :value="v"
      @change-text="$emit('change', $event)"
    />
  </div>
</template>

<script>
  import TextForm from '@/components/content-forms/TextForm';
  import HelpfulTooltip from '@/components/HelpfulTooltip';

  export default {
    props: ['title', 'value', 'helpText'],

    components: {
      TextForm,
      HelpfulTooltip
    },

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

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

  .text-form-with-help-text {
    margin-bottom: 30px;

    &__heading {
      margin-bottom: 15px;
      display: flex;
      justify-items: center;
      align-items: center;
    }

    &__title {
      font-size: toRem(22px);
      font-weight: 600;
      margin-right: 8px;
    }
  }
</style>
