<template>
  <div class="section-title" :class="[`section-title--${align}`]">
    <span v-if="label" class="section-title-label">{{ label }}</span>
    <component :is="tag" class="section-title-text">{{ title }}</component>
    <p v-if="subtitle" class="section-title-sub">{{ subtitle }}</p>
  </div>
</template>

<script setup>
defineProps({
  title: { type: String, required: true },
  subtitle: { type: String, default: '' },
  label: { type: String, default: '' },
  tag: { type: String, default: 'h2' },
  align: { type: String, default: 'center' },
})
</script>

<style lang="less" scoped>
.section-title {
  margin-bottom: @space-xl;

  .respond-md({
    margin-bottom: @space-2xl;
  });

  &--center {
    text-align: center;
  }

  &--left {
    text-align: left;
  }
}

.section-title-label {
  display: inline-block;
  font-size: @font-size-xs;
  font-weight: @font-weight-bold;
  color: @color-primary;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: @space-sm;
  opacity: 0.7;
}

.section-title-text {
  color: @color-text-primary;

  // 标题下方品牌色渐变短线装饰（加宽加圆润）
  &::after {
    content: '';
    display: block;
    width: 64px;
    height: 3px;
    background: @gradient-accent;
    border-radius: 3px;
    margin-top: @space-md;
  }

  .section-title--center & {
    &::after {
      margin-left: auto;
      margin-right: auto;
    }
  }
}

.section-title-sub {
  margin-top: @space-md;
  font-size: @font-size-md;
  color: @color-text-muted;
  line-height: @line-height-relaxed;
  letter-spacing: 0.3px;
}
</style>
