<template>
  <article class="scenario-image-card" :class="reverse ? 'is-reverse' : ''">
    <div class="scenario-image-card__media" data-aos="fade-right">
      <img :src="image" :alt="title" />
    </div>
    <div class="scenario-image-card__copy" data-aos="fade-left">
      <span>{{ label }}</span>
      <h3>{{ title }}</h3>
      <p>{{ description }}</p>
      <slot></slot>
    </div>
  </article>
</template>

<script setup>
defineProps({
  label: { type: String, required: true },
  title: { type: String, required: true },
  description: { type: String, required: true },
  image: { type: String, required: true },
  reverse: { type: Boolean, default: false }
})
</script>
