import type { ReactNode } from "react";

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

export const NewCampaignLayout = ({
	campaign,
	children,
}: { campaign: Campaign; children?: ReactNode }) => {
	return (
		<div className="bn-rounded-2xl bn-overflow-hidden bn-bg-layer-3 bn-mt-2">
			<div className="bn-px-4 bn-pb-2 bn-pt-3 bn-relative">
				{children}
				<div className="bn-relative bn-z-10">
					{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-bg-layer-2 bn-py-2.5 bn-px-4 bn-text-primary bn-text-sm">
				{campaign.description}{" "}
				<a
					href={campaign.link}
					className="bn-underline bn-text-theme"
					target="_blank"
					rel="noreferrer"
				>
					Read More
				</a>
			</div>
		</div>
	);
};
