import Image from "next/image";
import React from "react";
import { Container } from "@/components/Container";

interface BenefitsProps {
	imgPos?: "left" | "right";
	color?: string;
	background?: string;
	data: {
		imgPos?: "left" | "right";
		title: string;
		desc: string;
		image: any;
		bullets: {
			title: string;
			desc: string;
			icon: React.ReactNode;
		}[];
	};
}
export const Benefits = (props: Readonly<BenefitsProps>) => {
	const { data, background, color } = props;
	return (
		<div className="flex flex-wrap py-8 lg:gap-10 lg:flex-nowrap ">
			<div
				className={`flex items-center justify-center w-full lg:w-1/2 ${
					props.imgPos === "right" ? "lg:order-1" : ""
				}`}
			>
				<div>
					<Image
						src={data.image}
						width={521}
						height={521}
						alt="Benefits"
						className={"object-cover, rounded-[32px]"}
						placeholder="blur"
						blurDataURL={data.image.src}
					/>
				</div>
			</div>

			<div
				className={`flex flex-wrap items-center w-full lg:w-1/2 p-8 rounded-[32px] bg-${background?.includes("#") ? `[${background}]` : `${background}`} text-[${color}] ${
					data.imgPos === "right" ? "lg:justify-end" : ""
				}`}
			>
				{/* <div> */}
				<div className="flex flex-col w-full">
					<h3 className="max-w-2xl text-3xl font-bold leading-snug tracking-tight lg:leading-tight lg:text-4xl dark:text-white">
						{data.title}
					</h3>

					<p className="max-w-2xl py-4 text-lg leading-normal  lg:text-xl xl:text-xl dark:text-gray-300">
						{data.desc}
					</p>
				</div>

				<div className="w-full mt-5">
					{data.bullets.map((item, index) => (
						<Benefit key={index} title={item.title} icon={item.icon}>
							{item.desc}
						</Benefit>
					))}
				</div>
				{/* </div> */}
			</div>
		</div>
	);
};

function Benefit(props: any) {
	return (
		<div className="flex items-start mt-8 space-x-3">
			<div className="flex items-center justify-center flex-shrink-0 mt-1 bg-accent rounded-md w-11 h-11 ">
				{React.cloneElement(props.icon, {
					className: "w-7 h-7 text-white",
				})}
			</div>
			<div>
				<h4 className="text-xl font-semibold text-accent dark:text-gray-200">
					{props.title}
				</h4>
				<p className="mt-1 dark:text-gray-400">{props.children}</p>
			</div>
		</div>
	);
}