<template>
    <div class="subsonics-logo">
        <LogoDark class="img" v-if="globalStore.theme == 'light'"/>
        <LogoLight class="img" v-else/>
        <div v-if="dev" class="text-p">
            <h1>Subsonics</h1>
            <p>Developement</p>
        </div>
        <h1 v-if="!dev">Subsonics</h1>
    </div>
</template>
<script setup>
import LogoDark from '@/assets/LogoDark.vue';
import LogoLight from '@/assets/LogoLight.vue';
import { useGlobalStore } from '@/stores/globalStore';

const dev = import.meta.env.DEV;

const globalStore = useGlobalStore();
</script>
<style scoped>
    .img {
      width: 100px;
      height: 100px;
    }  
    div {
        display: flex;
        align-items: center;
    }
    
    .subsonics-logo {
        width: 100%;
        justify-content: center;
    }

    .text-p {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        position: relative;
    }
    
      .text-p h1 {
        margin: 0 !important;
      }

       .text-p p {
        margin: 0 !important;
        font-family: 'Gunship', sans-serif;
        position: absolute;
        bottom: -10px;
        font-size: 0.8em;
      }

    @media screen and (max-width: 768px),
            screen and (max-height: 607px) {
        .img {
        width: 70px;
        height: 70px;
        }  
        h1 {
            font-size: 6vw;
        }
    }

</style>