import { useEffect, useRef, useState } from "react";
import { Navigation, Thumbs } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import Portfolio11 from "../../../public/assets/imgs/work/portfolio/work-01.webp";
import Portfolio12 from "../../../public/assets/imgs/work/portfolio/work-02.webp";
import Portfolio13 from "../../../public/assets/imgs/work/portfolio/work-03.webp";
import Portfolio14 from "../../../public/assets/imgs/work/portfolio/work-04.webp";
import Portfolio15 from "../../../public/assets/imgs/work/portfolio/work-05.webp";
import Portfolio16 from "../../../public/assets/imgs/work/portfolio/work-06.webp";
import Link from "next/link";
import Image from "next/image";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/thumbs";
import animationCharCome from "@/lib/utils/animationCharCome";

const portfolioItems = [
  { image: Portfolio11, title: "DoItAI.Pro", category: "MVP Development" },
  { image: Portfolio12, title: "Brand Options", category: "Business Website" },
  { image: Portfolio13, title: "nobilità", category: "E-Commerce Platform" },
  { image: Portfolio14, title: "Bonobos", category: "Agency Website" },
  { image: Portfolio15, title: "Masar Center", category: "Business Website" },
  { image: Portfolio16, title: "Awamer", category: "Food Delivery Platform" }
];

const PortfolioElementV5 = () => {
  const [thumbsSwiper, setThumbsSwiper] = useState(null);
  const charAnim = useRef();

  useEffect(() => {
    animationCharCome(charAnim.current);
  }, []);

  return (
    <div></div>
    // <section className="portfolio-v5 portfolio__project" style={{ boxShadow: '0 5px 15px 0 rgba(0, 0, 0, 0.6)' }}>
    //   <div className="container line">
    //     <div className="line-3"></div>
    //     <div className="row pt-130 pb-100">
    //       <div className="col-xxl-8 col-xl-7 col-lg-6 col-md-6">
    //         <div className="sec-title-wrapper">
    //           <h2 className="sec-title-2 animation__char_come" ref={charAnim}>
    //             What We <br /> Build
    //           </h2>
    //         </div>
    //       </div>
    //       <div className="col-xxl-4 col-xl-5 col-lg-6 col-md-6">
    //         <div className="blog__text">
    //           <p>Building bright brands, unique visual systems and digital experiences.</p>
    //         </div>
    //       </div>
    //     </div>

    //     <div className="row">
    //       <div className="col-xxl-9 col-xl-9 col-lg-9 col-md-8">
    //         <div className="pp-slider-wrapper">
    //           <Swiper
    //             modules={[Navigation, Thumbs]}
    //             spaceBetween={10}
    //             loop={true}
    //             navigation={{
    //               nextEl: ".pp-prev",
    //               prevEl: ".pp-next",
    //             }}
    //             thumbs={{
    //               swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null,
    //             }}
    //             watchSlidesProgress={true}
    //           >
    //             {portfolioItems.map((item, index) => (
    //               <SwiperSlide key={index}>
    //                 <Link href="/portfolio" className="pp-slide">
    //                   <div className="pp-slide-img">
    //                     <Image
    //                       src={item.image}
    //                       alt={item.title}
    //                       priority={index < 2}
    //                       loading={index >= 2 ? "lazy" : "eager"}
    //                       style={{ height: "auto" }}
    //                     />
    //                   </div>
    //                 </Link>
    //               </SwiperSlide>
    //             ))}
    //           </Swiper>
    //           <div className="pp-next swipper-btn" style={{ cursor: "pointer" }}>prev</div>
    //           <div className="pp-prev swipper-btn" style={{ cursor: "pointer" }}>Next</div>
    //         </div>
    //       </div>

    //       <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-4">
    //         <Swiper
    //           modules={[Thumbs]}
    //           spaceBetween={10}
    //           slidesPerView={1}
    //           watchSlidesProgress={true}
    //           allowTouchMove={false}
    //           className="portfolio__project-thumbs"
    //           onSwiper={setThumbsSwiper}
    //         >
    //           {portfolioItems.map((item, index) => (
    //             <SwiperSlide key={`thumb-${index}`}>
    //               <div className="pp-slide-thumb">
    //                 <h3 className="pp-slide-title">{item.title}</h3>
    //                 <p>{item.category}</p>
    //               </div>
    //             </SwiperSlide>
    //           ))}
    //         </Swiper>
    //       </div>
    //     </div>
    //   </div>
    // </section>
  );
};

export default PortfolioElementV5;