<template>
  <div class="section-header" :class="[spacing]">
    <p v-if="overline" class="text-ui-label text-candlelight-500 mb-2">
      {{ overline }}
    </p>
    <component :is="tag" :class="[sizeClass, 'text-guild-100']">
      <slot>{{ title }}</slot>
    </component>
    <p v-if="subtitle" class="mt-3 text-guild-400 text-lg leading-relaxed">
      {{ subtitle }}
    </p>
    <GuildDivider v-if="divider" :variant="divider" compact class="mt-4" />
  </div>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  subtitle: {
    type: String,
    default: '',
  },
  overline: {
    type: String,
    default: '',
  },
  size: {
    type: String,
    default: 'md',
    validator: (v) => ['xl', 'lg', 'md', 'sm'].includes(v),
  },
  tag: {
    type: String,
    default: 'h2',
  },
  divider: {
    type: String,
    default: '',
    validator: (v) => ['', 'simple', 'woodcut', 'dither', 'dots'].includes(v),
  },
  compact: {
    type: Boolean,
    default: false,
  },
})

const sizeClass = computed(() => {
  const sizes = {
    xl: 'text-display-xl',
    lg: 'text-display-lg',
    md: 'text-display',
    sm: 'text-display-sm',
  }
  return sizes[props.size]
})

const spacing = computed(() => props.compact ? 'mb-4' : 'mb-8')
</script>
