<template>
    <span class="flex min-w-8 cursor-pointer" @click="chanegMode">
        <ClientOnly>
            <span :title="formatedModeName">
                <DarkComponent v-if="colormode.value == 'dark'" class="w-8" />
                <LightComponent v-if="colormode.value == 'light'" class="w-8" />
            </span>
        </ClientOnly>
    </span>
</template>

<script setup lang="ts">
import LightComponent from './MlLight.vue';
import DarkComponent from './MlDark.vue';
const colormode = useColorMode();
function chanegMode(): void {
    if (colormode.preference == 'dark') {
        colormode.preference = 'light';
    } else {
        colormode.preference = 'dark';
    }
}

const formatedModeName = computed(() => {
    if (colormode.value.length > 0) {
        return colormode.value.charAt(0).toUpperCase() + colormode.value.slice(1);
    } else {
        return '';
    }
});
</script>
