<template>
  <div
    v-if="
      heritedData.review_and_perspectives ||
        heritedData.context ||
        heritedData.action ||
        heritedData.success_conditions
    "
  >
    <ExperienceTitleText
      v-if="heritedData.review_and_perspectives"
      :data="heritedData.review_and_perspectives"
      :title="$_tr('REVIEW.title')"
      :title-color-primary="true"
      title-tag="h2"
    />

    <ExperienceTitleText
      v-if="heritedData.context"
      :data="heritedData.context"
      :title="$_tr('CONTEXT.title')"
      :title-color-primary="true"
      title-tag="h2"
    />

    <ExperienceTitleText
      v-if="heritedData.action"
      :data="heritedData.action"
      :title="$_tr('ACTION.title')"
      :title-color-primary="true"
      title-tag="h2"
    />

    <ExperienceTitleText
      v-if="heritedData.success_conditions"
      :data="heritedData.success_conditions"
      :title-color-primary="true"
      :title="$_tr('SUCCESS.title')"
      title-tag="h2"
    />
  </div>
</template>

<script>
import ExperienceTitleText from './ExperienceTitleText'

export default {
  name: 'ExperienceMainInfosGroup',
  $_i18nRootPath: 'customs.EXPERIENCE_PAGE',
  components: { ExperienceTitleText }
}
</script>
