<template>
  <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
    <div>
      <p class="text-sm font-bold uppercase tracking-[0.2em] text-brand">{{ eyebrow }}</p>
      <h2 class="mt-2 text-3xl font-black">{{ title }}</h2>
      <p class="mt-1 max-w-3xl text-slate-500">{{ subtitle }}</p>
    </div>
    <button v-if="action" class="rounded-2xl bg-ink px-5 py-3 text-sm font-bold text-white">{{ action }}</button>
  </div>
</template>

<script setup>
defineProps({
  eyebrow: String,
  title: String,
  subtitle: String,
  action: String,
});
</script>
