<template>
  <header class="flex flex-wrap items-center gap-x-3 gap-y-2">
    <div class="flex min-w-0 items-center gap-2">
      <slot name="title">
        <h1 class="truncate text-lg font-semibold text-fg">{{ title }}</h1>
      </slot>
      <span v-if="subtitle" class="truncate font-mono text-xs text-fg-subtle" :title="subtitle">{{ subtitle }}</span>
    </div>
    <div v-if="$slots.default" class="ml-auto flex flex-wrap items-center gap-2">
      <slot />
    </div>
    <div v-if="$slots.search" class="w-full">
      <slot name="search" />
    </div>
  </header>
</template>

<script setup lang="ts">
// En-tête de contenu : titre (ou slot #title pour un titre riche) + slot d'actions + slot recherche.
defineProps<{ title?: string; subtitle?: string }>();
</script>
