<template>
  <img
    class="bg-white dark:bg-zinc-900 dark:fill-white"
    :class="{ 'bg-gray-900': invert }"
    :src="src"
    alt="Chapril Mobilizon Logo"
  />
</template>

<script lang="ts" setup>
import { computed } from "vue";

const props = withDefaults(
  defineProps<{
    invert?: boolean;
  }>(),
  { invert: false }
);

const src = computed(
  () => `/img/chapril/logo_mobilizon_${props.invert ? "white" : "black"}.png`
);
</script>

<style lang="scss" scoped>
img {
  width: 172.1px;
  height: 59px;
}
</style>
