<script setup>
import { computed } from "vue";
import MaestroLogo from "../branding/MaestroLogo.vue";
import { useLayout } from "../../layout/composables/layout";

const props = defineProps({
  className: {
    type: String,
    default: "",
  },
  reverseTheme: {
    type: Boolean,
    default: false,
  },
});

const { isDarkTheme } = useLayout();

const foreground = computed(() => {
  const dark = isDarkTheme.value;
  if (props.reverseTheme) {
    return dark ? "dark" : "light";
  }

  return dark ? "light" : "dark";
});
</script>

<template>
  <MaestroLogo :class="className" :compact="false" :foreground="foreground" />
</template>
