<template>
  <div :class="getModifiersClass('c-text-and-image', modifiers)">
    <img v-if="imageUrl && !hasVideo" :class="getModifiersClass('c-text-and-image__image', modifiers)" :src="imageUrl"
      :alt="alternativeText" />

    <div v-if="hasVideo" class="c-text-and-image__image c-text-and-image__image--video js-teaser-video">
      <img v-if="imageUrl" :src="imageUrl" :alt="alternativeText" />
      <video controls v-else-if="videoUrl">
        <source :src="videoUrl" />
      </video>
      <div v-else-if="youtubeId" class="youtube-video" :data-video="youtubeId"></div>

      <div class="c-text-and-image__video-modal-trigger js-modal-trigger js-video-modal-trigger"
        data-target="#videoModal" :data-video-type="videoUrl ? 'video' : 'youtube'" :data-video="videoUrl ?? youtubeId">
        <span class="c-text-and-image__video-modal-trigger-icon">
        </span>
      </div>
    </div>

    <slot name="image" />
    <slot name="video" />
    <div :class="getModifiersClass('c-text-and-image__text', modifiers)">
      <div :class="getModifiersClass('c-text-and-image__text-inner', modifiers)">
        <slot name="text" />
      </div>
    </div>
  </div>
</template>

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

const props = defineProps<{
  imageUrl?: string;
  alternativeText?: string;
  videoUrl?: string;
  youtubeId?: string;
  modifiers?: ModifierItems;
}>();

const hasVideo = props.videoUrl || props.youtubeId;
const { getModifiersClass } = useComponentModifiers();
</script>
