<script setup>
defineProps({
  src: {
    type: String,
    required: true
  },
  alt: {
    type: String,
    default: ''
  },
  /** 이미지 아래 표시용 캡션 */
  caption: {
    type: String,
    default: ''
  },
  variant: {
    type: String,
    default: 'regular'
  }
})
</script>

<template>
  <figure
    class="prose-image mb-2.5"
    :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="caption"
      class="prose-image__caption mt-1.5 text-center text-sm text-[var(--site-muted)]"
    >
      {{ caption }}
    </figcaption>
  </figure>
</template>
