<template>
    <div>
        <nav>
            <ul>
                <li
                    v-for="link in links"
                    :key="link.name"
                    class="text-blue-200"
                >
                    <nuxt-link
                        v-if="link.url"
                        :to="link.url"
                        class="underline"
                        >{{ link.name }}</nuxt-link
                    >
                    <button v-else class="underline" @click="link.action">
                        {{ link.name }}
                    </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' },
            { action: 'logout', name: 'Sign Out' },
        ],
    }),
    options: {
        auth: false, // FIXME: auth: 'guest'
    },
    methods: {
        async logout() {
            this.$store.commit('notes/clear')
            await this.$auth.logout()
        },
    },
}
</script>

<style scoped></style>
