<script>

</script>

<script setup>
import { useForwardProps } from "reka-ui";
import { reactiveOmit } from "@vueuse/core";
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 },
  chip: { type: [Boolean, Object], required: false },
  class: { type: null, required: false },
  style: { type: null, required: false },
  b24ui: { type: null, required: false }
});
const avatarProps = useForwardProps(reactiveOmit(props, "light", "dark"));
</script>

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