<script setup lang="ts">
import { resolveImageSource } from '../utils/resolve-image'

withDefaults(defineProps<{
  image?: string
  imageFit?: string
  imagePosition?: string
}>(), {
  imageFit: 'cover',
  imagePosition: 'center',
})
</script>

<template>
  <div class="slidev-layout easy-layout-image-full">
    <slot name="image">
      <img v-if="image" :src="resolveImageSource(image)" alt="" :style="{ objectFit: imageFit, objectPosition: imagePosition }">
    </slot>
    <div class="easy-image-overlay"><slot /></div>
  </div>
</template>
