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

import flyBg from "@assets/campaigns/fly/flyBg.svg";
import { addOutputToken, setToChainId } from "@store/quoteParamSlice";
import { NewCampaignLayout } from "../NewCampaignLayout";
import { campaigns } from "../campaignData";

const flyToken = {
	chainId: 146,
	address: "0x6c9b3a74ae4779da5ca999371ee8950e8db3407f",
	name: "fly.trade",
	symbol: "FLY",
	decimals: 18,
	logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/36720.png",
	isShortListed: true,
	tags: [],
	trendingRank: null,
	marketCap: null,
	totalVolume: null,
	balance: "0",
	balanceInUsd: 0,
	isVerified: true,
};

export const FlyBanner = () => {
	const dispatch = useDispatch();
	const flyCampaign = campaigns.find((campaign) => campaign.id === "fly");
	if (!flyCampaign) return <></>;

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

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