<template>
  <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
    <div class="space-y-2">
      <p class="text-xs font-bold uppercase tracking-[0.16em] text-[#8c7b67]">Workspace</p>
      <h1 class="text-2xl font-black text-[#2f2418] lg:text-3xl">{{ title }}</h1>
      <p v-if="description" class="max-w-[720px] text-sm leading-6 text-[#6f6353]">{{ 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>
