import { Handshake, HeartPlus, Home, ScrollText, Search } from "lucide-react";
import Image from "next/image";
import { useTranslation } from "~/providers/I18nProvider";

export const ComeFunziona = () => {
	const { t } = useTranslation();

	const features = [
		{
			image: "/come_funziona_ricerca.jpg",
			icon: <Search className="size-8" />,
			title: t.come_funziona.features.ricerca.title,
			desc: t.come_funziona.features.ricerca.desc,
		},
		{
			image: "/come_funziona_aggiungi.jpg",
			icon: <HeartPlus className="size-8" />,
			title: t.come_funziona.features.aggiungi.title,
			desc: t.come_funziona.features.aggiungi.desc,
		},
		{
			image: "/come_funziona_meet.jpg",
			icon: <Handshake className="size-8" />,
			title: t.come_funziona.features.contatta.title,
			desc: t.come_funziona.features.contatta.desc,
		},
		{
			image: "/come_funziona_confirm.jpg",
			icon: <Home className="size-8" />,
			title: t.come_funziona.features.conferma.title,
			desc: t.come_funziona.features.conferma.desc,
		},
		{
			image: "/come_funziona_contratto.jpg",
			icon: <ScrollText className="size-8" />,
			title: t.come_funziona.features.firma.title,
			desc: t.come_funziona.features.firma.desc,
		},
	];
	return (
		<div className="mx-auto w-full max-w-6xl py-2">
			<h2 className="max-w-xl text-3xl font-semibold tracking-tight md:mx-auto md:text-center md:text-4xl md:leading-[3.5rem]">
				{t.come_funziona.title}
			</h2>
			<div className="mx-auto mt-8 w-full space-y-12 md:mt-16">
				{features.map((feature, idx) => (
					<div
						key={idx}
						className="flex flex-col items-center gap-x-8 gap-y-6 lg:flex-row lg:odd:flex-row-reverse"
					>
						<div className="flex shrink-0 basis-1/2 justify-center">
							<Image
								className="border-border/50 aspect-[6/4] rounded-xl border"
								src={feature.image}
								width={400}
								height={200}
								alt={`img${idx}`}
							/>
						</div>
						<div className="flex basis-1/2 flex-col">
							<div className="flex items-center gap-3 text-blue-600">
								{feature.icon}
								<h4 className="my-3 text-3xl font-semibold tracking-tight">
									{feature.title}
								</h4>
							</div>
							<p className="text-muted-foreground text-[17px]">
								{feature.desc}
							</p>
						</div>
					</div>
				))}
			</div>
		</div>
	);
};