<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 lg:max-w-none': variant === 'wide',
      'prose-image--full lg:-mx-20 lg:max-w-none': variant === 'full'
    }"
  >
    <div class="overflow-hidden rounded-[10px] border border-[var(--site-line)] bg-[var(--site-panel)]">
      <img class="prose-image__media w-full object-cover" :src="src" :alt="alt">
    </div>
    <figcaption v-if="$slots.default" class="prose-image__caption mt-3 text-center text-sm text-[var(--site-muted)]">
      <slot />
    </figcaption>
  </figure>
</template>
