import { useDispatch } from "react-redux";

import whaleBg from "@assets/campaigns/whale/whale-bg.svg";
import { addOutputToken, setToChainId } from "@store/quoteParamSlice";
import { resolveSvg } from "@utils/resolveSvg";
import { NewCampaignLayout } from "../NewCampaignLayout";
import { campaigns } from "../campaignData";

export const WhaleBanner = () => {
	const dispatch = useDispatch();
	const whaleCampaign = campaigns.find(
		(campaign) => campaign.id === "whale-campaign",
	);

	const usdcToken = {
		address: "0xaf88d065e77c8cc2239327c5edb3a432268e5831",
		chainId: 42161,
		decimals: 6,
		icon: "https://assets.coingecko.com/coins/images/6319/large/usdc.png?1696506694",
		logoURI:
			"https://assets.coingecko.com/coins/images/6319/large/usdc.png?1696506694",
		name: "USDC",
		symbol: "USDC",
	};
	const swapNowFn = () => {
		dispatch(setToChainId(42161));
		dispatch(addOutputToken({ id: 0, token: usdcToken }));
	};

	if (!whaleCampaign) return <></>;

	return (
		<NewCampaignLayout campaign={whaleCampaign} swapNowFn={swapNowFn}>
			<img
				src={resolveSvg(whaleBg)}
				alt="background"
				className="bn-absolute bn-top-0 bn-right-0"
			/>
		</NewCampaignLayout>
	);
};
