import React, { useEffect } from "react";
import "./Service_Features.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faTruckFast,
  faBoxOpen,
  faShieldHalved,
  faHeart,
} from "@fortawesome/free-solid-svg-icons";
import { useDispatch, useSelector } from "react-redux";
import { appSetup } from "../../../features/master/masterSlice";

const Service_Features = () => {

  const dispatch = useDispatch();
  const appsetup = useSelector((state) => state.master.app_setup);
  useEffect(() => {
    dispatch(appSetup());
  }, [dispatch]);

  const features = [
    {
      icon: faTruckFast,
      title: "Free Shipping",
      text: `On orders over ${appsetup?.minimum_order || 0}`,
    },
    {
      icon: faBoxOpen,
      title: "Easy Returns",
      text: "Hassle-free returns",
    },
    {
      icon: faShieldHalved,
      title: "Secure Payments",
      text: "100% secure checkout",
    },
    {
      icon: faHeart,
      title: "Loved by Pets",
      text: "Quality products",
    },
  ];

  return (
    <section className="Service_Features">
      <div className="containe">
        <div className="service-features-row">
          {features.map((item, index) => (
            <div className="service-feature" key={index}>
              <div className="service-icon">
                <FontAwesomeIcon icon={item.icon} />
              </div>

              <div className="service-content">
                <h6>{item.title}</h6>
                <p>{item.text}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Service_Features;
