<template>
  <!-- eslint-disable vue/no-v-html -->
  <h5 class="subtitle" data-cy="subtitle-block" v-html="sanitizedText" />
</template>

<script>
import { sanitize } from '@/helpers/text';

export default {
  props: ['value'],

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

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

.subtitle {
  padding-top: 1px;
  margin-bottom: $medium-spacing;
  margin-bottom: calc(#{$large-spacing} - 0.1rem);
  @include heading-line-height;
}
</style>
