import { useEffect, useState } from "react";
import {
  Users,
  GitBranchPlus,
  Settings,
  MessageSquare,
  Shield,
  BrainCog,
} from "lucide-react";
import { RiSecurePaymentLine } from "react-icons/ri";


export default function Benefits() {
  const [currentIndex, setCurrentIndex] = useState(0);

  const benefits = [
    {
      icon: <Users className="w-10 h-10 text-white" />,
      title: "Connect with Compatible Singles",
      description:
        "Our intelligent matching system connects you with individuals who truly align with your interests and values.",
      bgColor: "bg-[#F6E123]",
    },
    {
      icon: <RiSecurePaymentLine className="w-10 h-10 text-white" />,
      title: "Safe & Secure Environment",
      description:
        "Your privacy and safety are our top priorities. Enjoy a secure platform designed for genuine connections.",
      bgColor: "bg-[#4182F9]",
    },
    {
      icon: <Settings className="w-10 h-10 text-white" />,
      title: "Personalized Matches",
      description:
        "Receive tailored recommendations based on your preferences, helping you find someone truly special",
      bgColor: "bg-[#EF2424]",
    },
    {
      icon: <BrainCog className="w-10 h-10 text-white" />,
      title: "Success Stories",
      description:
        "Read testimonials from couples who found love on Happy Home Creators and get inspired!",
      bgColor: "bg-[#9747FF]",
    },
    {
      icon: <MessageSquare className="w-10 h-10 text-white" />,
      title: "Easy to Use",
      description:
        "Our intuitive interface makes finding your perfect match simple and enjoyable.",
      bgColor: "bg-[#18AA0B]",
    },
  ];

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((prevIndex) => (prevIndex + 1) % benefits.length);
    }, 3000);

    return () => clearInterval(interval);
  }, [benefits.length]);
  return (
    <div className="w-full max-w-6xl px-4 text-center mb-12">
      <h2 className="font-[600] mb-2 text-[22px]">
        Benefits of our matching website
      </h2>
      <p className="mb-1 font-[600] text-[16px]">Our companion site</p>
      <p className="text-[#EF2424] mb-12 font-[600] text-[16px]">unique features</p>

      <div className="relative w-full overflow-hidden">
        <div
          className="flex transition-transform duration-1000 space-x-8 md:space-x-12"
          style={{
            transform: `translateX(-${currentIndex * 300}px)`,
          }}
        >
          {benefits.map((benefit, index) => (
            <div
              key={index}
              className="md:max-w-[250px] max-w-[280px] flex flex-col items-center flex-shrink-0 font-[600]"
            >
              <div
                className={`w-16 h-16 ${benefit.bgColor} flex items-center justify-center mb-4`}
              >
                {benefit.icon}
              </div>
              <h3 className="text-lg font-semibold mb-2 text-[20px]">{benefit.title}</h3>
              <p className="text-sm text-center text-[16px]">{benefit.description}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
