import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Link from 'next/link'
import SectionTitle from "../SectionTitle/SectionTitle";
import Services from '../../api/service'
import { featuresData, homeFeature } from "../../utils/constant.utils";
import { useTranslation } from "next-i18next";
import iconImg1 from '/public/images/home/icons/strategic-planning.webp'
import iconImg2 from '/public/images/home/icons/expert-preparation.webp'
import iconImg3 from '/public/images/home/icons/ongoing-support.webp'

const iconMap = [iconImg1, iconImg2, iconImg3];


const settings = {
    dots: true,
    arrows: true,
    speed: 1000,
    slidesToShow: 4,
    slidesToScroll: 1,
    autoplay: false,
    responsive: [
        {
            breakpoint: 1400,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 1,
                infinite: true,
            }
        },
        {
            breakpoint: 1200,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 1,
                infinite: true,
                centerMode: false,
            }
        },
        {
            breakpoint: 991,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 1,
                centerMode: false,
            }
        },
        {
            breakpoint: 767,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
                centerMode: false,
            }
        },
        {
            breakpoint: 480,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
                centerMode: false,
            }
        }
    ]
};

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

const ServiceSection = (props) => {
    const { t } = useTranslation("(home)/homeFeature");
    const features = t("features", { returnObjects: true });

    return (
        <section className={`wpo-features-s2 section-padding ${props.sClass}`}>
            <div className="container">
                <SectionTitle
                    subTitle={t("sectionSubTitle")}
                    Title={t("sectionTitle")}
                />
                <div className="features-wrap">
                    <div className="row">
                        {features.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>
                                            <img
                                                src={iconMap[index].src}
                                                alt={`${feature.title} icon`}
                                                className="feature-img"
                                            />
                                        </div>
                                        <div className="feature-text">
                                            <h2>{feature.title}</h2>
                                            <p>
                                                {feature.description.length > 100
                                                    ? feature.description.slice(0, 100) + "..."
                                                    : feature.description}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
};

export default ServiceSection;