<template>
  <div
      :class="[
      'mb-10 md:mb-16',
      align === 'center' ? 'text-center' : 'text-left',
      titleClass
    ]"
      data-aos="fade-up"
  >
    <h2
        class="text-2xl md:text-4xl font-bold leading-tight mb-4"
        :class="titleClass"
    >
      <template v-if="highlight">
        {{ titlePart1 }}<span class="text-primary">{{ highlight }}</span>{{ titlePart2 }}
      </template>
      <template v-else>
        {{ title }}
      </template>
    </h2>
    <div class="relative inline-block" v-if="divider && align === 'center'">
      <div
          class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-20 h-0.5 bg-primary"
      ></div>
    </div>
    <p
        v-if="subtitle"
        class="text-gray-500 text-lg max-w-3xl"
        :class="[align === 'center' ? 'mx-auto' : '']"
    >
      {{ subtitle }}
    </p>
    <p
        v-if="description"
        class="text-gray-600 mt-4 max-w-3xl"
        :class="[align === 'center' ? 'mx-auto' : '']"
    >
      {{ description }}
    </p>
  </div>
</template>

<script>
export default {
  name: 'SectionTitle',
  props: {
    title: {
      type: String,
      default: ''
    },
    highlight: {
      type: String,
      default: ''
    },
    subtitle: {
      type: String,
      default: ''
    },
    description: {
      type: String,
      default: ''
    },
    align: {
      type: String,
      default: 'left'
    },
    divider: {
      type: Boolean,
      default: true
    },
    titleClass: {
      type: String,
      default: ''
    }
  },
  computed: {
    titlePart1() {
      return this.title.split(this.highlight)[0]
    },
    titlePart2() {
      return this.title.split(this.highlight)[1]
    }
  }
}
</script>