<template>
  <article
    class="Teaser z-2 card flex-col gap-sm"
    :class="[image.position ?? 'left']"
  >
    <div class="image-container">
      <img
        loading="lazy"
        width="550"
        height="350"
        :srcset="imageSet.join(', ')"
        :src="initialImage"
        aria-hidden="true"
        alt=""
      />
    </div>
    <div class="text-container flex-col gap-sm">
      <h3>{{title}}</h3>
      <main class="flex-col gap-sm">
        <slot />
      </main>
    </div>
  </article>
</template>

<script setup lang="ts">
import { getImageSet, getInitialImage } from '../utils/image'

type Props = {
  title : string
  image : {
    path : string
    name : string
    position ?: 'left' | 'right'
  }
}

const { image } = defineProps<Props>()

const imageSet = getImageSet(image.path, image.name)
const initialImage = getInitialImage(image.path, image.name)
</script>