web-humas-fe/components/landing/visi-misi.tsx

'use client'

// import "slick-carousel/slick/slick.css";
// import "slick-carousel/slick/slick-theme.css";
import { Swiper, SwiperSlide } from "swiper/react";
import { FreeMode, Pagination, Navigation } from "swiper/modules";

import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/free-mode";

import Image from "next/image";
import { useCallback, useRef } from "react";

export default function VisiMisi() {
    
    const sliderRef = useRef(null);

    const images = [
        {
            id: 1,
            url: "/vm1.jpg",
            title: "Image 1",
            description: "Description of image 1"
        },
        {
            id: 2,
            url: "/vm2.jpg",
            title: "Image 2",
            description: "Description of image 2"
        },
        {
            id: 3,
            url: "/vm3.jpg",
            title: "Image 3",
            description: "Description of image 3"
        }
    ];

    const handlePrev = useCallback(() => {
        if (!sliderRef.current) return;
        sliderRef.current.swiper.slidePrev();
    }, []);

    const handleNext = useCallback(() => {
        if (!sliderRef.current) return;
        sliderRef.current.swiper.slideNext();
    }, []);


    return (
        <div className='flex flex-wrap lg:m-10 m-5'>
            <div className="flex-none lg:w-1/4 w-full">
                <div className='p-3 text-green-600'>
                    <p className='text-3xl font-bold'>Visi & Misi</p>
                    <p className='pt-3'>Setelah Perjalanan Panjang dari Aceh hingga Papua, lahirlah visi dengan semangat perubahan yang di impikan oleh jutaan rakyat: "Indonesia Makmur untuk Semua".</p>
                </div>
                <div>
                    <Image
                        height={400}
                        width={400}
                        src='/frame.png'
                        alt='banner'
                    />
                </div>
            </div>
            <div className="lg:grow flex-none">
                <div className="lg:w-full w-[92vw]">
                    {/* <div className='ml-5 lg:mt-52 w-4/5 lg:w-full mt-10 flex gap-5 my-auto lg:justify-center justify-left overflow-x-scroll'>
                        <Card className="flex-none h-[420px] w-[300px]">
                            <CardBody>
                                <Image
                                    alt="vm"
                                    className="object-cover"
                                    src="/vm1.jpg"
                                    fill={true}
                                />
                            </CardBody>
                        </Card>
                        <Card className="flex-none h-[420px] w-[300px]">
                            <CardBody>
                                <Image
                                    alt="vm"
                                    className="object-cover"
                                    src="/vm2.jpg"
                                    fill={true}
                                />
                            </CardBody>
                        </Card>
                        <Card className="flex-none h-[420px] w-[300px]">
                            <CardBody>
                                <Image
                                    alt="vm"
                                    className="object-cover"
                                    src="/vm3.jpg"
                                    fill={true}
                                />
                            </CardBody>
                        </Card>
                    </div> */}
                    <div className="flex items-center justify-center lg:ml-10 mt-6 lg:mt-44">
                        <Swiper ref={sliderRef}
                            breakpoints={{
                                450: {
                                    slidesPerView: 1,
                                    spaceBetween: 5,
                                },
                                700: {
                                    slidesPerView: 2,
                                    spaceBetween: 15,
                                },
                                900: {
                                    slidesPerView: 3,
                                    spaceBetween: 15,
                                },
                            }}
                            freeMode={true}
                            navigation={true}
                            modules={[FreeMode, Navigation]}
                            className="max-w-[90%] w-4/5 lg:w-full ml-2 mr-2"
                        >
                            {images.map((item) => (
                                <SwiperSlide key={item.title}>
                                    <div className="flex flex-col gap-6 mb-20 group relative shadow-lg text-white rounded-xl px-6 py-8 h-[300px] w-full lg:h-[400px] lg:w-[300px] overflow-hidden cursor-pointer">
                                        {/* <div
                                            className="absolute inset-0 bg-cover bg-center"
                                            style={{ backgroundImage: `url(${item.url})` }}
                                        /> */}
                                         <Image
                                            alt="vm"
                                            className="object-cover"
                                            src={item.url}
                                            fill={true}
                                        />
                                        <div className="absolute inset-0 bg-black opacity-10 group-hover:opacity-50" />
                                        <div className="relative flex flex-col gap-3">
                                            {/* <item.icon className="text-blue-600 group-hover:text-blue-400 w-[32px] h-[32px]" /> */}
                                            <h1 className="text-xl lg:text-2xl">{item.title} </h1>
                                            <p className="lg:text-[18px]">{item.description} </p>
                                            {/* </div>
                                    <RxArrowTopRight className="absolute bottom-5 left-5 w-[35px] h-[35px] text-white group-hover:text-blue-500 group-hover:rotate-45 duration-100" /> */}
                                        </div>
                                    </div>
                                </SwiperSlide>
                            ))}
                        </Swiper>
                    </div>
                    <div className="swiper-navigation flex flex-wrap justify-center z-50 mt-[-50px] absolute left-0 lg:left-[28%] right-0 m-auto">
                        <div className="prev-arrow mr-3 border-1 border-indigo-500/75 rounded-md px-3" onClick={handlePrev} role="button">Prev</div>
                        <div className="next-arrow border-1 border-indigo-500/75 rounded-md px-3" onClick={handleNext} role="button">Next</div>
                    </div>
                </div>
            </div>
        </div>
    )
}