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

type Props = {
  chain: Chain | undefined;
  token: Token | undefined;
  amount: string;
};

export const TokenDetails = ({ chain, token, amount }: Props) => {
  return (
    <div className="flex gap-2">
      <TokenLogoWithChain
        token={token}
        chain={chain}
        tokenLogoClassName="min-w-9 w-9 h-9"
        generatedLogoClassName="min-w-9 w-9 h-9 text-[16px]"
        chainLogoClassName="w-5"
      />
      <div className="flex flex-col text-[12px]">
        <div className="text-t_text_primary text-nowrap">
          {`${Number(amount) < 0.0001 ? "<0.0001" : amount} ${
            token?.symbol ? token?.symbol : "unknown"
          }`}
        </div>
        <div className="text-xs text-t_text_primary text-opacity-50">
          {chain?.displayName}
        </div>
      </div>
    </div>
  );
};