import React from 'react';
import IconOne from '../../assets/images/icon/play.png';
import IconTwo from '../../assets/images/icon/task.png';
import IconThree from '../../assets/images/icon/target.png';
import IconFour from '../../assets/images/icon/reward.png';

function ServiceItem({ icon, title, description, index }) {
  return (
    <div className="appie-single-service text-center mt-30 wow animated fadeInUp" data-wow-duration="2000ms" data-wow-delay={`${200 * (index + 1)}ms`} style={{ cursor: "default" }}>
      <div className="icon">
        <img src={icon} alt={title} />
      </div>
      <h4 className="appie-title">{title}</h4>
      <p>{description}</p>
    </div>
  );
}

function ServicesHomeOne({ className }) {
  const serviceTitle = "Set Goals and Rewards to Inspire";
  const serviceItems = [
    {
      icon: IconOne,
      title: 'Free Account',
      description: 'Join WrenchBoard. Get your free account.',
    },
    {
      icon: IconTwo,
      title: 'Set Goals',
      description: 'Suggest or find what you want to get rewarded for.',
    },
    {
      icon: IconThree,
      title: 'Complete',
      description: 'Complete task, and notify assigner with ease.',
    },
    {
      icon: IconFour,
      title: 'Reward',
      description: 'Task completed. Find your reward.',
    },
  ];

  return (
    <section className={`appie-service-area pt-10 pb-50 ${className}`} id="service">
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-lg-8">
            <div className="appie-section-title text-center">
              <h3 className="appie-title">
                {serviceTitle}
              </h3>
            </div>
          </div>
        </div>
        <div className="row">
          {serviceItems.map(({ icon, title, description }, index) => (
            <div key={index} className="col-lg-3 col-md-6">
              <ServiceItem
                icon={icon}
                title={title}
                description={description}
                index={index}
              />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

export default ServicesHomeOne;