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>
  );
};