import Image from "next/image";
import React from "react";
import { IMAGE_BASE_URL } from "./BaseUrl";
import Link from "next/link";

interface IUserInfoProps {
  profile_image: string | null | undefined;
  user_level: string | null | undefined;
  first_name: string | undefined;
  last_name: string | undefined;
  user_name: string | undefined;
  is_verified: string | null | undefined;
  noLink?: boolean;
}

function UserInfo({
  profile_image,
  user_level,
  first_name,
  last_name,
  user_name,
  is_verified,
  noLink,
}: IUserInfoProps) {
  return (
    <div className="flex items-center text-xs max-sm:text-[10px] md:text-sm font-semibold">
      {noLink ? (
        profile_image ? (
          <Image
            className="rounded-2xl object-cover h-[72px] w-[72px] ml-3"
            width={75}
            height={75}
            alt={user_name || ""}
            src={`${IMAGE_BASE_URL}${profile_image}`}
            unoptimized={true}
          />
        ) : (
          <Image
            className="rounded-2xl object-cover h-[72px] w-[72px] ml-3"
            width={75}
            height={75}
            alt={user_name || ""}
            src={`/images/fake-avatar.png`}
            unoptimized={true}
          />
        )
      ) : (
        <Link href={`/users/${user_name}`}>
          {profile_image ? (
            <Image
              className="rounded-2xl object-cover h-[72px] w-[72px] ml-3"
              width={75}
              height={75}
              alt={user_name || ""}
              src={`${IMAGE_BASE_URL}${profile_image}`}
              unoptimized={true}
            />
          ) : (
            <Image
              className="rounded-2xl object-cover h-[72px] w-[72px] ml-3"
              width={75}
              height={75}
              alt={user_name || ""}
              src={`/images/fake-avatar.png`}
              unoptimized={true}
            />
          )}
        </Link>
      )}
      <div className="flex flex-col gap-1">
        <span className="text-[#387E65]">
          سطح: {user_level ? user_level : "تازه وارد"}
        </span>
        <h1>{first_name && first_name + " " + last_name}</h1>
        <h2 className="flex items-center gap-1 mt-1">
          {user_name}
          {is_verified === "verified" ? (
            <Image
              width={22}
              height={22}
              alt={"verify icon"}
              src={`/images/icons/verify.svg`}
            />
          ) : is_verified === "pending" ? (
            <Image
              width={25}
              height={25}
              alt={"not-verify icon"}
              src={`/images/icons/not-verify.svg`}
            />
          ) :is_verified === "true" ? (
            <Image
              width={22}
              height={22}
              alt="verify icon"
              src="/images/icons/verify2.svg"
            />
          ): ("")}
        </h2>
      </div>
    </div>
  );
}

export default UserInfo;
