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

type Props = {
  chain: Chain | undefined;
  token: Token | undefined;
  value: string;
};
export const TokenItem = ({ chain, token, value }: Props) => {
  return (
    <div className="flex items-center gap-2">
      <TokenLogoWithChain
        chain={chain}
        token={token}
        chainLogoClassName="w-5"
        tokenLogoClassName="w-9 h-9"
        generatedLogoClassName="w-9 h-9 text-[16px]"
      />
      <div className="flex flex-col w-min sm:w-auto">
        <div>{`${value} ${token?.symbol}`}</div>
        <div className="opacity-60">{chain?.displayName}</div>
      </div>
    </div>
  );
};