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

const ProjectsSection = () => {
    return (
        <section className="project-slider-section section-space fix">
            <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 no-border">PROJECTS</span>
                            <h3 className="section-title mt-10">Explore Our Recent Projects</h3>
                        </div>
                    </div>
                    <div className="col-xxl-6">
                        <div className="project_1_navigation__wrapprer position-relative z-1 text-end mt-30">
                            <div className="common-slider-navigation">
                                <button className="project-1-button-prev p-relative"><i className="fa-solid fa-chevron-left"></i></button>
                                <button className="project-1-button-next p-relative"><i className="fa-solid fa-chevron-right"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="swiper project-active-1">
                <div className="swiper-wrapper">
                    {caseStudies.slice(3, 7).map((project, index) => (
                        <div key={project.id} className="swiper-slide">
                            <div className="project-slider-area p-relative">
                                <figure className="image m-img">
                                    <img src={project.image} alt="" />
                                </figure>
                                <div className="content-area">
                                    <div className="title-area">
                                        <h6 className="mb-5">{project.tag}</h6>
                                        <h5><a href="#">{project.title}</a></h5>
                                    </div>
                                    <div className="icon-area">
                                        <a href="#"><i className="fa-solid fa-arrow-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};

export default ProjectsSection;