<script setup lang="ts">
import { Icon } from '@iconify/vue'
import Button from '../button/Button.vue'
import { NuxtLink } from '#components'

const colorMode = useColorMode()

function toggleColorMode(): void {
    const currentColorMode = colorMode.value
    if (currentColorMode === 'light') {
        colorMode.preference = 'dark'
    }
    if (currentColorMode === 'dark') {
        colorMode.preference = 'light'
    }
}
</script>

<template>
    <div class="flex justify-around items-center p-2 border-b-2 backdrop-blur">
        <NuxtLink to="/" class="self-start">
            <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight select-none">
                Anyame
            </h3>
        </NuxtLink>
        <div class="self-end">
            <Button variant="outline" @click="toggleColorMode()">
                <Icon icon="radix-icons:moon"
                    class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
                <Icon icon="radix-icons:sun"
                    class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
                <span class="sr-only">Toggle theme</span>
            </Button>
        </div>
    </div>
</template>
