<script setup>
import { computed } from "vue";
import { useLayout } from "../../composables/layout/layout.js";
import logoWhite from "../../assets/layout/images/logo-white.svg";
import logoDark from "../../assets/layout/images/logo-dark.svg";

const { isDarkTheme } = useLayout();

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

const logoSrc = computed(() => {
  const shouldUseWhiteLogo = props.reverseTheme
    ? !isDarkTheme.value
    : isDarkTheme.value;
  return shouldUseWhiteLogo ? logoWhite : logoDark;
});
</script>

<template>
  <div :class="['w-full flex items-center justify-center', className]">
    <img
      :src="logoSrc"
      alt="Company Logo"
      style="height: 100px; width: auto"
    />
  </div>
</template>
