import { Tooltip } from "@components/common/Tooltip";
import type { Token } from "@providers/ConfigProvider";
import { adjustDecimals } from "@utils/adjustDecimals";
import { formatValue } from "@utils/formatValue";

export const TokenBalance = ({ token }: { token: Token }) => {
	if (!token?.balance) return null;

	const formattedBalance = formatValue(token.balance, token.decimals);

	return (
		<div className="bn-flex bn-flex-col bn-items-end bn-text-right bn-aeonik-font bn-space-y-1 bn-max-w-[80px]">
			{Boolean(formattedBalance !== "0") && (
				<Tooltip content={formattedBalance}>
					<p className="bn-text-primary bn-text-base bn-font-medium bn-leading-[18.2px] bn-overflow-hidden bn-text-ellipsis bn-text-nowrap bn-w-full">
						{adjustDecimals(formattedBalance, 3)}
					</p>
				</Tooltip>
			)}

			{token?.balanceInUsd ? (
				<p className="bn-text-secondary bn-text-sm bn-font-normal bn-leading-4 bn-overflow-hidden bn-text-ellipsis bn-text-nowrap bn-w-full">
					${adjustDecimals(token.balanceInUsd)}
				</p>
			) : null}
		</div>
	);
};
