import React, { useEffect } from "react";
import { services1 } from "@/utils/data";

declare global {
    interface Window {
        Swiper: any;
    }
}

const ServiceSliderSection = () => {
    return (
        <section className="service-slider-section section-space bg-color-1 p-relative">
            <div className="shape-1 float-bob-y" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-10.png)" }}></div>
            <div className="shape-2 float-bob-y" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-9.png)" }}></div>
            <div className="shape-3" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-11.png)" }}></div>
            <div className="small-container">
                <div className="row">
                    <div className="col-xxl-6">
                        <div className="title-box mb-50 wow fadeInLeft" data-wow-delay=".5s">
                            <span className="section-sub-title">SERVICES WE’RE OFFERING</span>
                            <h3 className="section-title mt-10">Exclusive IT Services</h3>
                        </div>
                    </div>
                    <div className="col-xxl-6">
                        <div className="service_1_navigation__wrapprer position-relative z-1 text-end mt-30">
                            <div className="common-slider-navigation">
                                <button className="service-1-button-prev"><i className="icon-arrow-left-angle"></i></button>
                                <button className="service-1-button-next"><i className="icon-arrow-right-angle"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="swiper service-active-1">
                    <div className="swiper-wrapper">
                        {services1.map((service, index) => (
                            <div key={service.id} className="swiper-slide">
                                <div className="service-slider-area p-relative">
                                    <figure className="image w-img"><img src={service.image} alt="" /></figure>
                                    <div className="content">
                                        <div className="icon-box">
                                            <img src={`/assets/imgs/icon/icon${index === 0 ? "" : index === 1 ? "-2" : index === 2 ? "-3" : ""}.png`} alt="img" />
                                        </div>
                                        <h4 className="mb-15"><a href="#">{service.title}</a></h4>
                                        <p className="mb-25">{service.description}</p>
                                        <a href="#" className="service-btn">Read More <i className="icon-arrow-right-double"></i></a>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
};

export default ServiceSliderSection;
