<script setup>
defineProps({
  src: {
    type: String,
    required: true
  },
  alt: {
    type: String,
    default: ''
  },
  variant: {
    type: String,
    default: 'regular'
  }
})
</script>

<template>
  <figure
    class="prose-image my-8"
    :class="{
      'prose-image--wide lg:-mx-10': variant === 'wide',
      'prose-image--full lg:-mx-20': variant === 'full'
    }"
  >
    <img class="prose-image__media w-full bg-surface object-cover" :src="src" :alt="alt">
    <figcaption v-if="$slots.default" class="prose-image__caption mt-3 text-center text-sm text-muted">
      <slot />
    </figcaption>
  </figure>
</template>
