import type { Input } from "@/types/index";
import { TokenIcon } from "./TokenIcon";

export const TokensStacked = ({
	endpoints,
	small = false,
}: { endpoints: Input[]; small?: boolean }) => {
	return (
		<>
			{endpoints?.map((endpoint, index) => {
				// biome-ignore format:
				const defaultVariant = `bn-rounded-full bn-size-10 ${index === 0 ? '' : '-bn-ml-[18px]'}`
				// biome-ignore format:
				const smallVariant = `bn-rounded-full bn-size-[18px] ${index === 0 ? '' : '-bn-ml-2'}`

				const style = small ? smallVariant : defaultVariant;

				// biome-ignore format:
				const _key = `${endpoint.token.address}-${endpoint.token.chainId}`

				return (
					<div key={_key} className={style}>
						<TokenIcon
							url={endpoint.token.logoURI}
							classNames="bn-size-full bn-bg-layer-3"
						/>
					</div>
				);
			})}
		</>
	);
};
