"use client";
import ProfileAvatar from "@/components/main/ProfileAvatar";
import useAxios from "@/hooks/useAxios";
import { IProfileData } from "@/types/types";
import { formatFullName } from "@/lib/formatFullName";
import React, { useEffect, useState } from "react";

function AuthUserDetails() {
  const [userDetail, setUserDetail] = useState<IProfileData | null>(null);
  const { request } = useAxios();

  const fetchData = async () => {
    try {
      const response = await request<{ user: IProfileData }>("GET", "/profile");
      setUserDetail(response?.user || null);
    } catch (err) {
      console.log(err);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div className="mt-5 flex w-full max-w-md flex-col items-center text-center">
      <ProfileAvatar
        src={userDetail?.profile_image}
        alt={userDetail?.user_name || "profile"}
        size="md"
        rounded="xl"
        className="mb-3"
      />
      <span className="text-lg font-bold">
        {formatFullName(userDetail?.first_name, userDetail?.last_name)}
      </span>
      <p className="text-sm text-gray-500">{userDetail?.user_name}</p>
    </div>
  );
}

export default AuthUserDetails;
