import { motion } from "framer-motion";
import type { ReactNode } from "react";

import type { Campaign } from "./campaignData";

export const NewCampaignLayout = ({
	campaign,
	children,
	swapNowFn,
}: {
	campaign: Campaign;
	children?: ReactNode;
	swapNowFn?: () => void;
}) => {
	return (
		<motion.div
			initial={{ x: "100%", opacity: 0 }}
			animate={{ x: 0, opacity: 1 }}
			exit={{ x: "-100%", opacity: 0 }}
			transition={{ duration: 0.5 }}
			className="bn-rounded-2xl bn-overflow-hidden bn-bg-[#0A0A0A] bn-mt-2"
		>
			<div className="bn-px-4 bn-pb-2 bn-pt-3 bn-relative">
				{children}
				<div className="bn-relative bn-z-0">
					{campaign?.icon && (
						<img src={campaign.icon.toString()} alt="branch icon" className="bn-mb-2" />
					)}
					<p className="bn-text-base bn-font-medium bn-text-[#FDB850]">
						{campaign.title}
					</p>
				</div>
			</div>

			<div className="bn-flex bn-items-center bn-justify-between bn-space-x-5 bn-bg-layer-2 bn-py-2.5 bn-px-4">
				<div className="bn-text-primary bn-text-sm bn-whitespace-pre-line">
					{campaign.description}{" "}
					<a
						href={campaign.link}
						className="bn-underline bn-text-theme"
						target="_blank"
						rel="noreferrer"
					>
						Read More
					</a>
				</div>
				{swapNowFn && (
					<button
						type="button"
						className="bn-rounded-full bn-bg-theme bn-text-black bn-py-2 bn-px-4 bn-text-xs bn-font-semibold bn-flex-shrink-0"
						onClick={swapNowFn}
					>
						Swap Now
					</button>
				)}
			</div>
		</motion.div>
	);
};
