<template>
  <figure
    v-if="caption"
    :class="size"
  >
    <img
      :src="src"
      :alt="alt"
      :class="[size, alignment, imgClass]"
    >
    <figcaption :class="captionClass">
      {{ caption }}
    </figcaption>
  </figure>
  <img
    v-else
    :src="src"
    :alt="alt"
    :class="[size, alignment, imgClass]"
  >
</template>

<script setup lang="ts">
interface ImageProps {
  caption?: string
  src?: string
  size?: string
  alt?: string
  imgClass?: string
  alignment?: string
  captionClass?: string
}

withDefaults(defineProps<ImageProps>(), {
  caption: '',
  src: '',
  size: 'max-w-full',
  alt: '',
  imgClass: 'h-auto',
  alignment: '',
  captionClass: 'mt-2 text-sm text-center text-gray-500 dark:text-gray-400',
})
</script>