import { ArrowRight } from "lucide-react";

const Features: React.FC<
	React.PropsWithChildren<{
		title: string;
		description: string;
		cta: string;
	}>
> = ({ title, description, cta, children }) => {
	return (
		<section className="py-32 px-4">
			<div className="container flex flex-col gap-16 lg:px-16">
				<div className="lg:max-w-sm">
					<h2 className="mb-3 text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6">
						{title}
					</h2>
					<p className="mb-8 text-muted-foreground lg:text-lg">
						{description}
					</p>
					<a
						href="#"
						className="group flex items-center text-xs font-medium md:text-base lg:text-lg"
					>
						{cta}
						<ArrowRight className="ml-2 size-4 transition-transform group-hover:translate-x-1" />
					</a>
				</div>
				<div className="grid gap-6 md:grid-cols-2 lg:gap-8">
					{children}
				</div>
			</div>
		</section>
	);
};

export default Features;

export const FeatureItem: React.FC<
	React.PropsWithChildren<{
		title: string;
		image: string;
		position: "left" | "right";
	}>
> = ({ title, children, image, position }) => {
	const _image = () => (
		<div className="md:min-h-[24rem] lg:min-h-[28rem] xl:min-h-[32rem]">
			<img
				src={image}
				alt={title}
				className="aspect-[16/9] h-full w-full object-cover object-center"
			/>
		</div>
	);
	const _content = () => (
		<div className="flex flex-col justify-center px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12">
			<h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-2xl lg:mb-6">
				{title}
			</h3>
			<div className="text-muted-foreground lg:text-lg">{children}</div>
		</div>
	);
	return (
		<div
			className={`flex ${position === "left" ? "flex-col" : "flex-col-reverse"} overflow-clip rounded-xl border border-border md:col-span-2 md:grid md:grid-cols-2 md:gap-6 lg:gap-8`}
		>
			{position === "left" ? (
				<>
					<_image />
					<_content />
				</>
			) : (
				<>
					<_content />
					<_image />
				</>
			)}
		</div>
	);
};