import type { EndPoint } from "@hooks/apis/useFetchQuote";
import type { StatusEndPoint } from "@hooks/apis/useRequestStatus";
import { TokenIcon } from "./TokenIcon";

export const TokensStacked = ({
	endpoints,
	small = false,
}: { endpoints: StatusEndPoint[] | EndPoint[]; 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;

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