import clsx from "clsx";
import Warning from "../indicators/Warning";
import Admin from "../indicators/Admin";

interface AvatarProps {
  size: "small" | "medium" | "large";
  status?: "caution" | "admin";
  src?: string;
  name?: string;
}

export default function Avatar({ size, status, src, name }: AvatarProps) {
  return (
    <div
      className={clsx(
        "rounded-full text-white relative",
        size === "small" && "size-[2.222vw] button-s",
        size === "medium" && "size-[2.5vw] button-m",
        size === "large" && "size-[3.333vw] title-s"
      )}
    >
      {GetAvatarImage(src, name)}
      <div
        className={clsx(
          "absolute",
          size === "small" && "bottom-[1.389vw] left-[1.389vw]",
          size === "medium" && "bottom-[1.667vw] left-[1.667vw]",
          size === "large" && "bottom-[2.5vw] left-[2.5vw]"
        )}
      >
        {status === "caution" && <Warning type="caution" />}
        {status === "admin" && <Admin />}
      </div>
    </div>
  );
}

function GetAvatarImage(src?: string, name?: string) {
  // Aninymous avatar
  if (!src && !name) {
    return <img src="/img/popups/MessageUserPfp.png" alt="avatar" />;
  }

  // Name avatar
  if (name && !src) {
    const nameParts = name.split(" ");
    const firstLetter = nameParts[0][0].toUpperCase();
    const secondLetter =
      nameParts.length > 1
        ? nameParts[nameParts.length - 1][0].toUpperCase()
        : "";

    return (
      <div className="bg-[#7B60F3] size-full rounded-full flex items-center justify-center">
        <span className="">
          {firstLetter}
          {secondLetter}
        </span>
      </div>
    );
  }

  // Src avatar
  return <img src={src} alt="avatar" />;
}
