<template>
  <div class="c-quote">
    <div v-if="imageUrl" :class="getModifiersClass('c-quote__image', modifiers)">
      <img :src="imageUrl" :alt="imageAlternativeText" />
    </div>
    <span v-else class="c-quote__icon"></span>
    <figure>
      <blockquote class="c-quote__text" cite="https://www.sodra.com">
        <slot>
          {{ text }}
        </slot>
      </blockquote>
      <figcaption class="c-quote__information">
        {{ information }}
        <cite>
          <a :href="citeUrl">{{ citeText }}</a>
        </cite>
      </figcaption>
    </figure>
  </div>
</template>

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

defineProps<{
  imageUrl?: string;
  imageAlternativeText?: string;
  closeBtextuttonText?: string;
  text?: string;
  information?: string;
  citeText?: string;
  citeUrl?: string;
  modifiers?: ModifierItems;
}>();

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