<template>
  <div class="app-header" :data-tour="tourAnchor || undefined">
    <div class="app-header-title min-w-0 flex-1">
      <div class="min-w-0">
        <h1 class="text-lg sm:text-xl font-semibold text-ink-strong leading-tight">
          {{ title }}
        </h1>
        <p
          v-if="description"
          class="mt-0.5 text-sm text-ink-secondary leading-snug max-w-2xl"
        >
          {{ description }}
        </p>
        <slot name="subtitle" />
      </div>
    </div>
    <div class="app-header-actions self-start">
      <slot name="actions" />
    </div>
  </div>
</template>

<script setup lang="ts">
withDefaults(
  defineProps<{
    title: string
    description?: string
    /** Stable walkthrough anchor, e.g. intake-header */
    tourAnchor?: string
  }>(),
  { description: undefined, tourAnchor: undefined },
)
</script>
