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

const ProjectSlider2Section = () => {
    return (
        <section className="project-slider-two-section section-space-bottom p-relative fix">
            <div className="bg-shape" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-37.png)" }}></div>
            <div className="small-container">
                <div className="project-two-title-area mb-60">
                    <div className="title-box wow fadeInLeft" data-wow-delay=".5s">
                        <span className="section-sub-title">Projects</span>
                        <h3 className="section-title mt-10">Our Latest Projects</h3>
                    </div>
                    <a className="primary-btn-1 btn-hover" href="#">
                        all PROJECTS &nbsp; | <i className="fa-solid fa-arrow-right"></i>
                        <span className="btn-hover-span"></span>
                    </a>
                </div>
            </div>
            <div className="container-fluid">
                <div className="swiper project-active-1">
                    <div className="swiper-wrapper">
                        {caseStudies.slice(0, 6).map((project, index) => (
                            <div key={project.id} className="swiper-slide">
                                <div className="project-slider-two-box p-relative">
                                    <figure className="image w-img">
                                        <img src={project.image} alt="" />
                                    </figure>
                                    <div className="content">
                                        <div className="inner-box">
                                            <span>{project.tag}</span>
                                            <h5><a href="#">{project.title}</a></h5>
                                        </div>
                                        <a className="icon-1" href="#">
                                            <i className="fa-solid fa-arrow-right"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
};

export default ProjectSlider2Section;