<template>
    <div>
        <nav>
            <ul>
                <li
                    v-for="link in links"
                    :key="link.name"
                    class="text-blue-200"
                >
                    <nuxt-link :to="link.url" class="underline">{{
                        link.name
                    }}</nuxt-link>
                </li>
                <li class="text-blue-200">
                    <button class="underline" @click="logout">
                        Sign Out
                    </button>
                </li>
            </ul>
        </nav>
        <client-only>
            <div v-if="$auth.$state.loggedIn">
                User: {{ $auth.$state.user }}
            </div>
        </client-only>
    </div>
</template>

<script>
export default {
    name: 'Home',
    data: () => ({
        links: [
            { url: '/signin', name: 'Sign In' },
            { url: '/register', name: 'Register' },
            { url: '/notes', name: 'Notes' },
            { url: '/404', name: '404' },
        ],
    }),
    options: {
        auth: false,
    },
    methods: {
        async logout() {
            this.$store.commit('notes/clear')
            await this.$auth.logout()
        },
    },
}
</script>
