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";


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) => {
    return (
        <section className={`wpo-features-s2 section-padding ${props.sClass}`}>
            <div className="container">
                <SectionTitle subTitle={`STRENGTHENING AMERICA'S FUTURE`} Title={'How We Build Better Futures Together'} />
                <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> */}
                                            <h2> {feature.title}</h2>
                                            {feature.description.length > 100
                                                ? feature.description.slice(0, 100) + "..."
                                                : feature.description}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>

            </div>
        </section>
    );
}

export default ServiceSection;