<script>

</script>

<script setup>
import { useForwardProps } from "reka-ui";
import { reactiveOmit } from "@vueuse/core";
import { usePrefix } from "../../composables/usePrefix";
import B24Avatar from "../Avatar.vue";
defineOptions({ inheritAttrs: false });
const props = defineProps({
  light: { type: String, required: true },
  dark: { type: String, required: true },
  as: { type: null, required: false },
  alt: { type: String, required: false },
  icon: { type: [Function, Object], required: false },
  text: { type: String, required: false },
  size: { type: null, required: false },
  color: { type: null, required: false },
  chip: { type: [Boolean, Object], required: false },
  class: { type: null, required: false },
  style: { type: null, required: false },
  b24ui: { type: Object, required: false }
});
const avatarProps = useForwardProps(reactiveOmit(props, "light", "dark"));
const prefix = usePrefix();
</script>

<template>
  <B24Avatar v-bind="{ ...avatarProps, ...$attrs }" :src="light" :class="prefix('dark:hidden')" />
  <B24Avatar v-bind="{ ...avatarProps, ...$attrs }" :src="dark" :class="prefix('hidden dark:block')" />
</template>
