"use client";

import Image from "next/image";
import React, { useEffect, useState } from "react";
import { IMAGE_BASE_URL } from "../main/BaseUrl";
import CompleteRegister from "./settings/CompleteRegister";
import Link from "next/link";
import { useUser } from "@/hooks/useUser";

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"
      >
        <Image
          className="rounded-2xl object-cover h-[72px] w-[72px] md:h-[120px] md:w-[120px] ml-3"
          width={120}
          height={120}
          alt={user?.user_name || "user profile"}
          src={`${IMAGE_BASE_URL}${user?.profile_image}`}
          unoptimized={true}
        />
        <div className="flex flex-col gap-1">
          <span className="text-[#387E65]">
            سطح: {user?.user_level ? user?.user_level : "تازه وارد"}
          </span>

          <span>
            {user?.first_name && user?.first_name + " " + user?.last_name}
          </span>
          <div className="flex items-center gap-1 mt-1">
            {user?.user_name}
            {isRegister === "verified" ? (
                          <Image
                            width={22}
                            height={22}
                            alt={"verify icon"}
                            src={`/images/icons/verify.svg`}
                          />
                        ) : isRegister === "pending" ? (
                          <Image
                            width={25}
                            height={25}
                            alt={"not-verify icon"}
                            src={`/images/icons/not-verify.svg`}
                          />
                        ) : isRegister === "true" ? (
                          <Image
                            width={22}
                            height={22}
                            alt="verify icon"
                            src="/images/icons/verify2.svg"
                          />
                        ) : (
                          ""
                        )}
            <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;
