import React from "react";
import Link from "next/link";

const ClickHandler = () => {
  window.scrollTo(10, 0);
};

const featuresData = [
  {
    icon: "fi flaticon-charity",
    title: "Make Donation",
    link: "/team",
    description:
      "Donate now to help those in need! Make a difference by taking action with your donation."
  },
  {
    icon: "fi flaticon-conference-1",
    title: "Campaign Events",
    link: "/campaign",
    description:
      "Join us in supporting a worthy cause at our charity event, together we can make a difference."
  },
  {
    icon: "fi flaticon-community",
    title: "Join Volunteer",
    link: "/volunteer",
    description:
      "Join our team of volunteers and help make a positive impact in your community today.."
  }
];

const Features2 = () => {
  return (
    <div className="wpo-features-s2 section-padding">
      <div className="container">
        <div className="features-wrap">
          <div className="row">
            {featuresData.map((feature, index) => (
              <div className="col-lg-4 col-md-6 col-12" key={index}>
                <div className="feature-item">
                  <div className="features-wrapper">
                    <div className="icon">
                      <div className="features-dot">
                        <div className="dots"></div>
                      </div>
                      <i className={feature.icon}></i>
                    </div>
                    <div className="feature-text">
                      <h2>
                        <Link onClick={ClickHandler} href={feature.link}>
                          {feature.title}
                        </Link>
                      </h2>
                      <p>{feature.description}</p>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Features2;