import { useDispatch } from "react-redux";
import { sonic } from "wagmi/chains";

import shadowBg from "@assets/campaigns/sonic/shadowBg.png";
import { addOutputToken, setToChainId } from "@store/quoteParamSlice";
import { NewCampaignLayout } from "../NewCampaignLayout";
import { campaigns } from "../campaignData";

const shadowToken = {
	address: "0x3333b97138d4b086720b5ae8a7844b1345a33333",
	balance: "0",
	balanceInUsd: 0,
	chainId: 146,
	decimals: 18,
	isShortListed: false,
	isVerified: true,
	logoURI:
		"https://coin-images.coingecko.com/coins/images/53747/large/tokenbg.png?1737180639",
	marketCap: 10660095,
	name: "Shadow",
	symbol: "SHADOW",
	tags: [],
	totalVolume: 1628740,
	trendingRank: 1207,
};

export const ShadowBanner = () => {
	const dispatch = useDispatch();
	const shadowCampaign = campaigns.find((campaign) => campaign.id === "shadow");
	if (!shadowCampaign) return <></>;

	const swapNowFn = () => {
		dispatch(setToChainId(sonic.id));
		dispatch(addOutputToken({ id: 0, token: shadowToken }));
	};

	return (
		<NewCampaignLayout campaign={shadowCampaign} swapNowFn={swapNowFn}>
			<img
				src={shadowBg.toString()}
				alt="background"
				className="bn-h-full bn-w-full bn-objectcover bn-absolute bn-top-0 bn-right-0"
			/>
		</NewCampaignLayout>
	);
};
