<script setup lang="ts">
type Props = {
    title: string;
    description?: string;
    variant?: 'default' | 'small';
};

withDefaults(defineProps<Props>(), {
    variant: 'default',
});
</script>

<template>
    <header :class="['c-heading', { 'c-heading--small': variant === 'small' }]">
        <h2 class="c-heading__title">
            {{ title }}
        </h2>
        <p v-if="description" class="c-heading__description">
            {{ description }}
        </p>
    </header>
</template>

<style scoped>
@reference "../../css/app.css";

.c-heading {
    @apply mb-8 space-y-0.5;
}

.c-heading--small {
    @apply mb-0 space-y-0;
}

.c-heading__title {
    @apply text-xl font-semibold tracking-tight;
}

.c-heading--small .c-heading__title {
    @apply mb-0.5 text-base font-medium tracking-normal;
}

.c-heading__description {
    @apply text-sm text-muted-foreground;
}
</style>
