<template>
  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
    <div class="space-y-1">
      <h1 class="text-2xl lg:text-3xl font-bold text-base-content">{{ title }}</h1>
      <p v-if="description" class="text-base-content/70">{{ description }}</p>
    </div>
    <div v-if="$slots.actions || actions?.length" class="flex items-center gap-2 flex-shrink-0">
      <slot name="actions">
        <PageHeaderAction
          v-for="(action, i) in actions"
          :key="i"
          :to="action.to"
          :icon="action.icon"
          @click="action.onClick"
        >
          {{ action.label }}
        </PageHeaderAction>
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Action {
  label: string
  icon?: string
  to?: string
  onClick?: () => void
}

defineProps<{
  title: string
  description?: string
  actions?: Action[]
}>()
</script>
