<script setup lang="ts">
interface Props {
  label?: string
  labelColor?: string
  title: string
  highlightWord?: string
  subtitle?: string
}

withDefaults(defineProps<Props>(), {
  label: undefined,
  labelColor: 'primary',
  highlightWord: undefined,
  subtitle: undefined,
})
</script>

<template>
  <div class="text-center mb-12">
    <VChip
      v-if="label"
      :color="labelColor"
      variant="tonal"
      class="mb-4"
    >
      {{ label }}
    </VChip>

    <h2 class="text-h4 font-weight-bold mb-3">
      <template v-if="highlightWord && title.includes(highlightWord)">
        {{ title.split(highlightWord)[0] }}<span class="hero-gradient-text">{{ highlightWord }}</span>{{ title.split(highlightWord)[1] }}
      </template>
      <template v-else>
        {{ title }}
      </template>
    </h2>

    <p
      v-if="subtitle"
      class="text-body-1 text-medium-emphasis mx-auto"
      style="max-inline-size: 600px;"
    >
      {{ subtitle }}
    </p>
  </div>
</template>
