<script setup>
defineProps({
  eyebrow: {
    type: String,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
  description: {
    type: String,
    required: true,
  },
})
</script>

<template>
  <section class="hero-panel hero-layout panel">
    <div class="hero-copy">
      <p class="eyebrow">{{ eyebrow }}</p>
      <h3>{{ title }}</h3>
      <p class="muted hero-description">{{ description }}</p>
    </div>

    <div v-if="$slots.aside || $slots.actions" class="hero-side">
      <div v-if="$slots.aside" class="hero-aside">
        <slot name="aside" />
      </div>
      <div v-if="$slots.actions" class="hero-actions">
        <slot name="actions" />
      </div>
    </div>
  </section>
</template>
