import Title from "@/components/Title";
import useGetTitle from "@/query/useGetTitle";
import { DetailedHTMLProps, HTMLAttributes } from "react";

export default function AvatarTitle({
  avatarID,
  avatarName,
  textID = false,
  ...props
}: {
  avatarID?: string;
  avatarName?: string;
  textID?: boolean;
} & DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>) {
  const {
    data: { title, titleColor },
    isFetched: isTitleLoaded,
  } = useGetTitle(avatarID);

  if (!avatarName) {
    return null;
  }

  return (
    <span {...props}>
      {isTitleLoaded && (
        <>
          <Title title={title} titleColor={titleColor} />{" "}
        </>
      )}
      {avatarName}
      {textID && avatarID && ` (${avatarID})`}
    </span>
  );
}