import Image from "next/image";
import React from "react";
import Link from "next/link";
import ProfileAvatar from "./ProfileAvatar";
import VerificationBadge from "./VerificationBadge";
import { formatFullName } from "@/lib/formatFullName";

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) {
  const avatar = (
    <ProfileAvatar
      src={profile_image}
      alt={user_name || ""}
      size="md"
      rounded="2xl"
      className="ml-3"
    />
  );

  return (
    <div className="flex items-center text-xs max-sm:text-[10px] md:text-sm font-semibold">
      {noLink ? (
        avatar
      ) : (
        <Link href={`/users/${user_name}`}>{avatar}</Link>
      )}
      <div className="flex flex-col gap-1">
        <span className="text-[#387E65]">
          سطح: {user_level ? user_level : "تازه وارد"}
        </span>
        <h1>{formatFullName(first_name, last_name)}</h1>
        <h2 className="flex items-center gap-1 mt-1">
          <span className="inline-flex items-center gap-1">
            {user_name}
            <VerificationBadge isVerified={is_verified} />
          </span>
        </h2>
      </div>
    </div>
  );
}

export default UserInfo;
