<template>
  <Block
    :title="title"
    :title-options="titleColorPrimary ? titleOptions : {}"
    :title-tag="titleTag"
    class="mt-xl"
  >
    <BaseText :html="true">{{ data }}</BaseText>
  </Block>
</template>

<script>
import { BaseText } from 'inside-collection/atoms'

import Block from '@inside-commons/components/lib/Block'

export default {
  name: 'ExperienceTitleText',
  $_i18nRootPath: 'customs.EXPERIENCE_PAGE',
  components: { Block, BaseText },
  props: {
    data: {
      type: [Object, Array, String],
      required: true
    },
    title: {
      type: String,
      required: true
    },
    titleTag: {
      type: String,
      default: 'h3',
      required: false
    },
    titleColorPrimary: {
      type: Boolean,
      required: false,
      default: null
    }
  },
  data() {
    return {
      titleOptions: {
        color: this.$_theme('colorSecondary')
      }
    }
  }
}
</script>
