<script>

</script>

<script setup>
import { computed } from "vue";
import { useForwardProps } from "reka-ui";
import { useColorMode } from "#imports";
import { useLocale } from "../../../composables/useLocale";
import icons from "../../../dictionary/icons";
import B24Switch from "../../../components/Switch.vue";
defineOptions({ inheritAttrs: false });
const props = defineProps({
  as: { type: null, required: false },
  color: { type: null, required: false },
  size: { type: null, required: false },
  loading: { type: Boolean, required: false },
  loadingIcon: { type: [Function, Object], required: false },
  label: { type: String, required: false },
  description: { type: String, required: false },
  class: { type: null, required: false },
  b24ui: { type: null, required: false },
  disabled: { type: Boolean, required: false },
  id: { type: String, required: false },
  name: { type: String, required: false },
  required: { type: Boolean, required: false },
  value: { type: String, required: false },
  defaultValue: { type: Boolean, required: false }
});
const { t } = useLocale();
const colorMode = useColorMode();
const switchProps = useForwardProps(props);
const isDark = computed({
  get() {
    return colorMode.value === "dark";
  },
  set(_isDark) {
    colorMode.preference = _isDark ? "dark" : "light";
  }
});
</script>

<template>
  <B24Switch
    v-model="isDark"
    :checked-icon="icons.dark"
    :unchecked-icon="icons.light"
    v-bind="{
  ...switchProps,
  'aria-label': isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark'),
  ...$attrs
}"
  />
</template>
