<script setup>

    const user = useSupabaseUser();
    const supabaseClient = useSupabaseClient();

    const logout = () => {
        const { error } = supabaseClient.auth.signOut();
        if (error) {
            console.log(error);
        }


        // fix, for oder supabase version
        // $fetch('/api/_supabase/session',{
        //     method: "POST",
        //     body: {event: "SIGNED_OUT", session:null}
        // });

        user.value = null;
        navigateTo("/");
    };

</script>

<template>
    <!-- NAVBAR -->
    <header 
        class="sticky 
            top-0 z-50 
            flex 
            justify-between 
            items-center 
            space-x-1 
            order-b 
            bg-white 
            p-4 
            shadow-md">
        <NuxtLink class="text-3xl font-mono" to="/">cartrader</NuxtLink>
        <div v-if="user" class="flex">
            <NuxtLink to="/profile/listings" class="mr-5">profile</NuxtLink>
            <p class="cursor-pointer" @click="logout">Logout</p>
        </div>
        <NuxtLink v-else to="/login">Login</NuxtLink>
    </header>
    <!-- NAVBAR -->
 
</template>