import { useEffect, useState } from "react";
import { UnknownTokenLogo } from "./Unknown";
import { Token } from "@src/models";

type Props = {
  token: Partial<Token> | undefined;
  className?: string;
  generatedLogoClassName?: string;
};
export const TokenLogo = ({
  token,
  className,
  generatedLogoClassName,
}: Props) => {
  const [errorOcurred, setErrorOccured] = useState(false);
  useEffect(() => {
    setErrorOccured(false);
  }, [token?.address]);
  if (!token) {
    return null;
  }
  if (errorOcurred) {
    return (
      <UnknownTokenLogo
        tokenName={token.name!}
        className={generatedLogoClassName}
      />
    );
  }

  return token?.image ? (
    <img
      src={token.image}
      alt={token.name}
      className={`border border-solid border-t_text_primary border-opacity-10 rounded-2xl ${className}`}
      onError={() => setErrorOccured(true)}
    />
  ) : (
    <UnknownTokenLogo
      tokenName={token.name!}
      className={generatedLogoClassName}
    />
  );
};