"use client"; import React, { useEffect, useState } from 'react'; import Link from 'next/link'; import { ShoppingBag, User, LogOut } from 'lucide-react'; import { useCartStore } from '@/store/cartStore'; import { supabase } from '@/lib/supabase'; export default function Navbar() { const { openCart, items } = useCartStore(); const cartItemCount = items.reduce((total, item) => total + item.quantity, 0); // --- NEW: Auth State Management --- const [user, setUser] = useState(null); useEffect(() => { // 1. Check if a user is logged in right when the page loads supabase.auth.getSession().then(({ data: { session } }) => { setUser(session?.user ?? null); }); // 2. Listen for any login/logout events across the app const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => { setUser(session?.user ?? null); }); // Cleanup the listener when the component unmounts return () => subscription.unsubscribe(); }, []); const handleSignOut = async () => { await supabase.auth.signOut(); }; return ( ); }