<script setup lang="ts">
const theme: Ref<string> = ref("mocha");

import Card from './Card.vue';
onBeforeMount(() => {
    theme.value = localStorage.getItem("theme") || "mocha";
    document.documentElement.setAttribute("data-theme", theme.value);
});
const availableThemes = [
    "mocha",
    "latte",
    "yule-night",
    "yule-day",
    "midsummer-twilight",
    "midsummer-daylight",
    "fireworks-night",
    "parade-day",
    "harvest-twilight",
    "golden-hour",
    "stargazer",
    "daydreamer",
];

const changeTheme = (newTheme: string) => {
    theme.value = newTheme;
    document.documentElement.setAttribute("data-theme", newTheme);
    localStorage.setItem("theme", newTheme);
};
</script>

<template>
    <nav class="flex justify-center">
        <Card class="flex flex-wrap justify-center max-w-[40rem]  border border-border">
            <NuxtLink to="/">Home</NuxtLink>
            <NuxtLink to="/servers">Servers</NuxtLink>
            <NuxtLink to="/diagnostics">Diagnostics</NuxtLink>
            <NuxtLink to="/projects">Projects</NuxtLink>
            <a href="https://vtt.smgames.club" target="_blank">Foundry VTT</a>
            <a href="https://oekaki.smgames.club" target="_blank">Oekaki</a>
            <a href="https://social.smgames.club/" target="_blank">Social</a>
            <a href="https://madstar.studio" target="_blank">Shop</a>
            <!-- Icon inline dropdown for theme switching (use paint palette icon) -->
            <!-- Only show an icon, no title or label -->
            <select v-model="theme" @change="changeTheme(theme)">
                <option v-for="t in availableThemes" :key="t" :value="t">{{ t }}</option>
            </select>
            <HueComputer :key=theme />
        </Card>
    </nav>
</template>

<style>
a {
    @apply m-2
}
</style>