'use client';

import { Suspense } from 'react';
import { useEffect, useState } from 'react';
import { createClient } from '@/utils/supabase/client';
import Navlinks from './Navbar/Navlinks';
import { User } from '@supabase/supabase-js';

// Client component version of Navbar that replicates server component functionality
export default function NavbarWrapper() {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    const fetchUser = async () => {
      try {
        const supabase = createClient();
        const { data } = await supabase.auth.getUser();
        setUser(data.user);
      } catch (error) {
        console.error('Error fetching user:', error);
      } finally {
        setLoading(false);
      }
    };
    
    fetchUser();
  }, []);
  
  return (
    <Suspense fallback={<div className="h-16 bg-background" />}>
      {loading ? (
        <div className="h-16 bg-background" />
      ) : (
        <Navlinks user={user} />
      )}
    </Suspense>
  );
}