"use client"

import axios from "axios";
import * as React from 'react';
import { useEffect, useState } from "react";
import { useSession } from "next-auth/react";
import { cn } from "@/lib/utils";

const UserProfile = () => {
    const { data: session, status } = useSession();
    const [user, setUser] = useState<{ id: string, username: string }>()

    let previousUsername = ""

    useEffect(() => {
      if (status !== "authenticated" || previousUsername == session.user?.name) {
          return
      }

      previousUsername = session.user?.name || ""
      if (session.user) {
        const fetchData = async () => {
          if (user) return

          let userData = (await axios.get("/api/account")).data
          setUser(userData)
        }

        fetchData().catch(console.error)
      }
  }, [session])

  return ( 
    <div className={cn("px-10 py-6 rounded-md bg-blue-300 overflow-hidden wrap", user == null && "hidden")}>
      <p className="text-xs text-gray-200">Logged in as:</p>
      <p>{user?.username}</p>
    </div>
   );
}
 
export default UserProfile;