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";
import UserInfoClient from "./UserInfoClient";
import { cn } from "@/lib/utils";

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;
  userId?: string | null;
  noLink?: boolean;
  /** Rendered on the far end of the username row (e.g. score/rate stats) — stretches the row to full width when set. */
  trailingContent?: React.ReactNode;
}

function UserInfo({
  profile_image,
  user_level,
  first_name,
  last_name,
  user_name,
  is_verified,
  userId,
  noLink,
  trailingContent,
}: IUserInfoProps) {
  const avatar = (
    <ProfileAvatar
      src={profile_image}
      alt={user_name || ""}
      size="md"
      rounded="2xl"
      className="ml-3"
      userId={userId}
      verifyBadge={is_verified}
    />
  );

  return (
    <div
      className={cn(
        "flex items-center text-xs max-sm:text-[10px] md:text-sm font-semibold",
        trailingContent && "w-full"
      )}
    >
      {noLink ? avatar : <Link href={`/users/${user_name}`}>{avatar}</Link>}
      <div className={cn("flex flex-col gap-1", trailingContent && "min-w-0 flex-1")}>
        <UserInfoClient user_level={user_level} />
        <h1>{formatFullName(first_name, last_name)}</h1>
        <h2 className="flex items-center justify-between gap-1 mt-1">
          <span className="inline-flex items-center gap-1">
            {user_name}
            <VerificationBadge verifyBadge={is_verified} />
          </span>
          {trailingContent}
        </h2>
      </div>
    </div>
  );
}

export default UserInfo;
