<template>
  <article class="editorial-card" :class="tone" :data-aos="aos">
    <span v-if="index" class="editorial-card__index">{{ index }}</span>
    <slot name="media"></slot>
    <div class="editorial-card__body">
      <p v-if="eyebrow" class="editorial-card__eyebrow">{{ eyebrow }}</p>
      <h3>{{ title }}</h3>
      <p>{{ description }}</p>
      <slot></slot>
    </div>
  </article>
</template>

<script setup>
defineProps({
  title: { type: String, required: true },
  description: { type: String, required: true },
  eyebrow: { type: String, default: '' },
  index: { type: String, default: '' },
  tone: { type: String, default: 'plain' },
  aos: { type: String, default: 'fade-up' }
})
</script>
