<template>
  <div class="visual-media relative w-full overflow-hidden bg-F1F5F9" :class="{ 'rounded-16': rounded }">
    <img v-if="src" class="visual-media__image block w-full h-full" :src="src" :mode="mode" />
    <div v-else class="visual-media__empty block w-full h-full"></div>
    <slot />
  </div>
</template>

<script setup>
defineProps({
  src: {
    type: String,
    default: "",
  },
  mode: {
    type: String,
    default: "aspectFill",
  },
  rounded: {
    type: Boolean,
    default: true,
  },
});
</script>

<style scoped lang="scss">
@import "./styles/index.scss";
</style>
