<script>

</script>

<script setup>
import { computed } from "vue";
import { useRuntimeConfig } from "#imports";
import ImageComponent from "#build/b24ui-image-component";
import { usePrefix } from "../../composables/usePrefix";
import { resolveBaseURL } from "../../utils";
defineOptions({ inheritAttrs: false });
const props = defineProps({
  dark: { type: String, required: true },
  light: { type: String, required: true }
});
const refinedLight = computed(() => resolveBaseURL(props.light, useRuntimeConfig().app.baseURL));
const refinedDark = computed(() => resolveBaseURL(props.dark, useRuntimeConfig().app.baseURL));
const prefix = usePrefix();
</script>

<template>
  <component :is="ImageComponent" :src="refinedLight" :class="prefix('dark:hidden')" v-bind="$attrs" />
  <component :is="ImageComponent" :src="refinedDark" :class="prefix('hidden dark:block')" v-bind="$attrs" />
</template>
