import type { ReactNode } from "react";

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

export const CampaignLayout = ({
	campaign,
	children,
}: { campaign: Campaign; children?: ReactNode }) => {
	return (
		<div
			key={campaign.id}
			className="bn-bg-layer-2 bn-rounded-2xl bn-p-4 bn-mt-2 bn-overflow-hidden bn-border bn-border-solid bn-border-strong bn-relative"
		>
			<div className="bn-flex bn-items-center bn-justify-between bn-space-x-1">
				<div className="bn-relative bn-z-10 bn-max-w-[314px]">
					<p className="bn-text-theme bn-text-base bn-font-medium">{campaign.title}</p>
					<p className="bn-text-primary bn-text-sm bn-font-normal">
						{campaign.description}{" "}
						<a
							href={campaign.link}
							className="bn-text-theme bn-underline"
							target="_blank"
							rel="noreferrer"
						>
							Read More
						</a>
					</p>
				</div>
				{children}
			</div>

			{campaign.btnClick && (
				<button
					className="bn-text-theme bn-font-semibold bn-text-sm bn-mt-2 bn-px-4 bn-py-2 bn-bg-accent-1 bn-rounded-full"
					type="button"
					onClick={campaign.btnClick}
				>
					Swap Now
				</button>
			)}
		</div>
	);
};
