<script setup lang="ts">
defineProps<{
  to: string;
  backLabel: string;
  title: string;
  subtitle?: string;
}>();
</script>

<template>
  <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
    <div class="min-w-0 space-y-3">
      <div class="flex flex-wrap items-center gap-3 px-1">
        <NuxtLink
          :to="to"
          :aria-label="backLabel"
          class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-white/70 text-[#0d854a] transition hover:bg-white"
        >
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="none">
            <path d="M11.5 4.5L6 10L11.5 15.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </NuxtLink>

        <h1 class="min-w-0 text-2xl font-black tracking-[-0.03em] text-[#123824] md:text-3xl">
          {{ title }}
        </h1>
      </div>

      <p v-if="subtitle" class="max-w-3xl pl-[3.5rem] text-sm leading-6 text-[#466653]">
        {{ subtitle }}
      </p>
    </div>

    <div v-if="$slots.actions" class="flex shrink-0 flex-wrap gap-2 md:justify-end">
      <slot name="actions" />
    </div>
  </div>
</template>
