<script setup lang="ts">
defineProps<{
  eyebrow?: string
  title: string
  body?: string
}>()
</script>

<template>
  <div class="heading">
    <div v-if="eyebrow" class="eyebrow">{{ eyebrow }}</div>
    <h1 class="title">{{ title }}</h1>
    <p v-if="body || $slots.body" class="body">
      <slot name="body">{{ body }}</slot>
    </p>
  </div>
</template>

<style scoped>
.heading {
  margin-bottom: 24px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

.body {
  margin: 10px 0 0 0;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}
</style>
