<script setup>
import { computed } from "vue";
import { appBranding } from "../../composables/useAppSettings";

const props = defineProps({
  compact: { type: Boolean, default: false },
  className: {
    type: String,
    default: "",
  },
  /** light = logo for colored/dark backgrounds (sidebar); dark = logo for light backgrounds */
  foreground: {
    type: String,
    default: "light",
    validator: (v) => ["light", "dark"].includes(v),
  },
});

const src = computed(() => {
  if (props.compact) {
    return appBranding.compact;
  }

  return props.foreground === "light"
    ? appBranding.sidebar
    : appBranding.header;
});
</script>

<template>
  <img
    class="logo-image w-auto object-contain object-left"
    :class="[
      props.className || 'max-h-9',
      { 'logo-image--blend-dark-bg': foreground === 'light' },
    ]"
    :src="src"
    alt="Build2Connect"
  />
</template>

<style scoped>
/* Non-transparent raster logos (opaque black boxed exports) integrate with dark/colored sidebar. */
.logo-image--blend-dark-bg {
  mix-blend-mode: lighten;
}
</style>
