import { TokenLogo } from "@src/components";
import { Chain, Token } from "@src/models";

type Props = {
  token: Partial<Token> | undefined;
  chain: Chain | undefined;
  tokenLogoClassName?: string;
  generatedLogoClassName?: string;
  chainLogoClassName?: string;
};
export const TokenLogoWithChain = ({
  token,
  chain,
  tokenLogoClassName,
  generatedLogoClassName,
  chainLogoClassName,
}: Props) => {
  return (
    <div className="relative flex items-end pr-1 pb-1">
      <TokenLogo
        token={token}
        className={tokenLogoClassName}
        generatedLogoClassName={generatedLogoClassName}
      />
      {chain && (
        <img
          src={chain.image}
          alt={chain.name}
          className={`absolute bottom-0 right-0 border border-solid border-t_bg_secondary rounded-3xl ${chainLogoClassName}`}
        />
      )}
    </div>
  );
};