<script setup lang="ts">
import Eyebrow from '@/components/Eyebrow.vue';

withDefaults(
    defineProps<{
        title: string;
        subtitle?: string;
        eyebrow?: string;
        eyebrowColor?: string;
        titleClass?: string;
    }>(),
    {
        titleClass: 'text-h4',
    },
);
</script>

<template>
    <div>
        <Eyebrow v-if="eyebrow" :text="eyebrow" :color="eyebrowColor" />
        <h1 class="font-weight-bold mb-1 font-serif" :class="titleClass">
            {{ title }}
        </h1>
        <p v-if="subtitle" class="text-body-2 text-medium-emphasis mb-0">
            {{ subtitle }}
        </p>
    </div>
</template>
