<template>
  <figure :class="getModifiersClass('c-image', modifiers)">
    <img :src="imageUrl" :alt="alternativeText" />
    <figcaption v-if="captionText" :class="textOnImage ? 'c-image__text-on-image' : undefined">
      {{ captionText }}
    </figcaption>
  </figure>
</template>

<script setup lang="ts">
import type { ModifierItems } from './image.config';
import useComponentModifiers from '../../composable/useComponentModifiers';

defineProps<{
  imageUrl: string;
  alternativeText: string;
  captionText?: string;
  textOnImage?: boolean;
  modifiers?: ModifierItems;
}>();

const { getModifiersClass } = useComponentModifiers();
</script>
