<script setup>
// SVG'ler Vite ile bundle'lanıyor → /build/assets/onox-*.svg
import logoDarkText from '../../images/onox-logo-dark.svg'  // koyu metin (light bg için)
import logoLightText from '../../images/onox-logo.svg'      // beyaz metin (dark bg için)
import markSvg from '../../images/onox-mark.svg'

defineProps({
    /** 'full' = SVG logo with text | 'mark' = sadece simge */
    variant: { type: String, default: 'mark' },

    /**
     * 'auto'  = Tailwind dark mode'a göre otomatik switch (önerilen)
     * 'light' = koyu zemin → beyaz metin
     * 'dark'  = açık zemin → koyu metin
     */
    theme: { type: String, default: 'auto' },
})
</script>

<template>
    <!-- Mark only (icon, no text) -->
    <img v-if="variant === 'mark'"
         :src="markSvg"
         alt="Onoxsoft Panel"
         class="block" />

    <!-- Auto theme: two images, CSS toggles visibility by dark mode -->
    <template v-else-if="theme === 'auto'">
        <img :src="logoDarkText" alt="Onoxsoft Panel" class="block h-auto dark:hidden" />
        <img :src="logoLightText" alt="Onoxsoft Panel" class="hidden h-auto dark:block" />
    </template>

    <!-- Explicit theme -->
    <img v-else
         :src="theme === 'light' ? logoLightText : logoDarkText"
         alt="Onoxsoft Panel"
         class="block h-auto" />
</template>
