import React from "react";
import thumb from "../assets/images/PerformingTask2.jpg";
import getConfig from "./../../Config/config";
import Image from "next/image";

function TrafficHomeOne() {
  return (
    <section className="wrench-on-area pt-90 pb-45">
      <div className="container">
        <div className="row">
          <div className="col-lg-7">
            <div className="appie-traffic-title">
              <h3 className="title">{featuresContent.title}</h3>
              <p>{featuresContent.detail}</p>
            </div>
            <div className="row">
              {featuresContent.list?.map(({ icon, header, paragraph }, idx) => (
                <div className="col-lg-6 col-md-6" key={idx}>
                  <div
                    className={`appie-traffic-service features item-${
                      idx + 1
                    } mb-30`}
                    style={{ paddingRight: "45px" }}
                  >
                    <div className="icon">
                      <i className={icon} />
                    </div>
                    <h5 className="title">{header}</h5>
                    <p>{paragraph}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="traffic-thumb d-none d-lg-flex col-lg-5 justify-content-center align-items-center">
            <div className="position-relative d-flex">
              <div
                className="withFadeEdge position-absolute bg-transparent w-100 h-100"
                style={{ zIndex: "1" }}
              ></div>
              <Image
                className="position-relative wow animated fadeInRight p-1"
                width={'100%'}
                height={'100%'}
                data-wow-duration="2000ms"
                data-wow-delay="200ms"
                src={thumb}
                alt=""
                style={{ zIndex: "0", minHeight: "300px", minWidth: "400px", width: "100%" }}
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

export default TrafficHomeOne;

const featuresContent = {
  title: "on WrenchBoard.",
  detail:
    "Performing task on WrenchBoard is easy. All you need is a free account.",
  list: [
    {
      icon: "fal fa-check",
      header: "Free account",
      paragraph: "Get family access from parents, or create your free account.",
    },
    {
      icon: "fal fa-check",
      header: "Suggest or Find Task",
      paragraph: "Suggest tasks to parents or pick from the market.",
    },
    {
      icon: "fal fa-check",
      header: "Complete Task",
      paragraph: "Complete the task as specified.",
    },
    {
      icon: "fal fa-check",
      header: "Reward",
      paragraph: "Get your reward as specified.",
    },
  ],
};