import type { Token } from "@/types/index";
import { adjustDecimals } from "@utils/adjustDecimals";
import { formatValue } from "@utils/formatValue";
import { TokenIcon } from "./TokenIcon";
import { Tooltip } from "./Tooltip";

export const TokenIconWithAmount = ({
	amount,
	token,
}: { amount: string; token: Token }) => {
	const formattedAmount = formatValue(amount, token.decimals);
	return (
		<div className="bn-flex bn-items-center bn-space-x-1">
			<TokenIcon url={token.logoURI} classNames="bn-size-4" />
			<Tooltip content={formattedAmount}>
				<span className="bn-text-primary bn-text-sm bn-font-medium">
					{adjustDecimals(formattedAmount, 4)}
				</span>
			</Tooltip>
		</div>
	);
};
