"use client";

import React, { useEffect, useState } from "react";
import ProfileAvatar from "../main/ProfileAvatar";
import VerificationBadge from "../main/VerificationBadge";
import CompleteRegister from "./settings/CompleteRegister";
import Link from "next/link";
import { useUser } from "@/hooks/useUser";
import { formatFullName } from "@/lib/formatFullName";

function UserDetails() {
  const [isRegister, setIsRegister] = useState<string | undefined>("false");
  const user = useUser();

  useEffect(() => {
    setIsRegister(user?.is_Register);
  }, [user]);

  return (
    <div>
      <Link
        href={"/settings/profile"}
        className="flex items-center text-xs md:text-sm font-semibold"
      >
        <ProfileAvatar
          src={user?.profile_image}
          alt={user?.user_name || "user profile"}
          size="md"
          rounded="2xl"
          className="ml-3 md:h-[120px] md:w-[120px]"
        />
        <div className="flex flex-col gap-1">
          <span className="text-[#387E65]">
            سطح: {user?.user_level ? user?.user_level : "تازه وارد"}
          </span>

          <span>{formatFullName(user?.first_name, user?.last_name)}</span>
          <div className="flex items-center gap-1 mt-1">
            <span className="inline-flex items-center gap-1">
              {user?.user_name}
              <VerificationBadge
                isVerified={user?.is_verified}
                isRegister={user?.is_Register}
              />
            </span>
            <span className="mr-4">{user?.mobile}</span>
          </div>
        </div>
      </Link>
      {isRegister == "false" ? (
        <CompleteRegister
          user_name={user?.user_name || null}
          first_name={user?.first_name || null}
          user_type={user?.user_type || null}
        />
      ) : (
        ""
      )}
    </div>
  );
}

export default UserDetails;
