"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";
import { useTranslation } from "react-i18next";

function UserDetails() {
  const { t } = useTranslation("common");
  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 gap-3 text-xs font-semibold md:text-sm"
      >
        <ProfileAvatar
          src={user?.profile_image}
          alt={user?.user_name || "user profile"}
          size="md"
          rounded="2xl"
          className="shrink-0 md:h-[120px] md:w-[120px]"
          userId={user?._id}
          verifyBadge={user?.verify_badge}
        />
        <div className="flex min-w-0 flex-col gap-1">
          <span className="text-[#387E65]">
            {t("settings.level")}:{" "}
            {user?.user_level ? user?.user_level : t("settings.newcomer")}
          </span>

          <span className="truncate">
            {formatFullName(user?.first_name, user?.last_name)}
          </span>
          <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1">
            <span className="inline-flex items-center gap-1">
              {user?.user_name}
              <VerificationBadge verifyBadge={user?.verify_badge} />
            </span>
            {user?.mobile ? (
              <span className="text-neutral-500 dark:text-neutral-400">
                {user.mobile}
              </span>
            ) : null}
          </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;
