import type { Token } from "@/types/index";

import { useMappedChainData } from "../../hooks/useMappedChainData";
import { TokenIcon } from "./TokenIcon";

export const TokenWithNetwork = ({
	token,
	right,
}: { token: Token; right?: boolean }) => {
	const mappedChainData = useMappedChainData();

	// @fixme: bg color
	if (!token)
		return <div className="bn-bn-layer-3 bn-h-9 bn-w-9 bn-rounded-full" />;
	const networkUrl = mappedChainData?.[token?.chainId].icon ?? "";

	// biome-ignore format:
	const networkIconStyle = `bn-absolute bn-w-2.5 bn-h-2.5 bn-bottom-2 ${right ? 'bn-right-1.5' : 'bn-left-1.5'}`

	return (
		<div className="bn-h-9 bn-w-9 bn-rounded-full bn-p-2 bn-bg-layer-3 bn-relative">
			<TokenIcon classNames="bn-w-full bn-h-full" url={token.logoURI} />
			<TokenIcon classNames={networkIconStyle} url={networkUrl} />
		</div>
	);
};
