<script setup lang="ts">
import { computed } from 'vue';

const props = withDefaults(defineProps<{
  title: string;
  description?: string;
  variant?: 'default' | 'small';
}>(), {
  variant: 'default',
});

const headingTag = computed(() => props.variant === 'small' ? 'h3' : 'h2');
</script>

<template>
  <div class="space-y-1">
    <component :is="headingTag" class="font-semibold text-2xl" :class="{ 'text-xl': variant === 'small' }">
      {{ title }}
    </component>
    <p v-if="description" class="text-muted-foreground text-sm">
      {{ description }}
    </p>
  </div>
</template>
