<template>
 <NavItemDropdown>
  <NavItemDropdownToggle>
   <BIcon
    :key="colorModeIcon"
    margin="e-2"
    :icon="colorModeIcon"
    aria-hidden="true"
   />
  </NavItemDropdownToggle>
  <DropdownMenu>
   <DropdownItem @click="changeColorMode(false)">
    <BIcon
     margin="e-2"
     icon="bi:sun-fill"
     aria-hidden="true"
    />
    Light
   </DropdownItem>
   <DropdownItem @click="changeColorMode(true)">
    <BIcon
     margin="e-2"
     icon="bi:moon-stars-fill"
     aria-hidden="true"
    />
    Dark
   </DropdownItem>
  </DropdownMenu>
 </NavItemDropdown>
</template>

<script setup>
import { useDark } from "../../../composables/utils/useDark";
import { computed } from "#imports";
import NavItemDropdown from "../../bootstrap/nav/NavItemDropdown";
import DropdownMenu from "../../bootstrap/dropdown/DropdownMenu";
import DropdownItem from "../../bootstrap/dropdown/DropdownItem.vue";
import NavItemDropdownToggle from "../../bootstrap/nav/NavItemDropdownToggle";
import BIcon from "../../icon/BIcon";
const isDark = useDark();
const changeColorMode = (value) => {
  isDark.value = value;
};
const colorModeIcon = computed(() => {
  return isDark.value ? "bi:moon-stars-fill" : "bi:sun-fill";
});
</script>
