Untitled

"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/router";
import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import type swiperProps from "swiper";
import Link from "next/link";
import { Pagination } from 'swiper/modules';
import { ArrowLeftOutlined, ArrowRightOutlined } from "@ant-design/icons";
import { Carousel } from "antd";

interface HomeInvestasiSliderType {
    data: any[];
}

export default function HomeInvestasiSlider({ data }: HomeInvestasiSliderType) {
    const [activeIndex, setActiveIndex] = useState(0);
    const [swiper, setSwiper] = useState<swiperProps | null>(null);
    const [swiperMobile, setSwiperMobile] = useState<swiperProps | null>(null);

    return (
        <div>
            <div className="flex justify-center md:hidden">
                <Carousel>
                    {
                        data?.map((item, index) => {
                            return (
                                <div key={index} className="pb-4">
                                    <div className={`flex flex-col cursor-pointer items-start p-6 w-full bg-contain bg-no-repeat rounded-md relative`}
                                        style={{
                                            backgroundImage: `url(${item?.banner})`
                                        }}>
                                        <h1 className="font-poppins700 text-white text-2xl md:text-4xl">{item?.title}</h1>
                                        {/* <div className="absolute right-10 bottom-4 w-[35px] h-[35px] flex justify-center items-center bg-[#FED837] rounded-md">
                                        <Image
                                            src={"/assets/home/investasi/arrow.png"}
                                            alt="arrow"
                                            width={25}
                                            height={25}
                                        />
                                    </div> */}
                                    </div>
                                </div>
                            )
                        })
                    }
                </Carousel>
                <Swiper
                    slidesPerView={1}
                    spaceBetween={10}
                    grabCursor={true}
                    loop={true}
                    modules={[Pagination]}
                    onSwiper={(e) => {
                        setSwiperMobile(e);
                    }}
                    onActiveIndexChange={(e) => {
                        setActiveIndex(e.realIndex);
                    }}
                    className="mySwiper"
                    style={{
                        zIndex: 0
                    }}
                >
                    {
                        data?.map((item, index) => {
                            return (
                                <SwiperSlide key={index} className="pb-4">
                                    <div className={`flex flex-col cursor-pointer hover:md:translate-y-2 hover:transition-all hover:duration-200 items-start p-6 h-[500px] w-full bg-contain bg-no-repeat rounded-md relative`}
                                        style={{
                                            backgroundImage: `url(${item?.banner})`
                                        }}>
                                        <h1 className="font-poppins700 text-white text-2xl md:text-4xl">{item?.title}</h1>
                                        {/* <div className="absolute right-10 bottom-4 w-[35px] h-[35px] flex justify-center items-center bg-[#FED837] rounded-md">
                                        <Image
                                            src={"/assets/home/investasi/arrow.png"}
                                            alt="arrow"
                                            width={25}
                                            height={25}
                                        />
                                    </div> */}
                                    </div>
                                </SwiperSlide>
                            )
                        })
                    }
                </Swiper>
            </div>
            <div className="min-w-[100vw] hidden md:block">
                <Swiper
                    slidesPerView={4}
                    spaceBetween={10}
                    grabCursor={true}
                    loop={true}
                    modules={[Pagination]}
                    onSwiper={(e) => {
                        setSwiper(e);
                    }}
                    onActiveIndexChange={(e) => {
                        setActiveIndex(e.realIndex);
                    }}
                    className="mySwiper"
                    style={{
                        zIndex: 0
                    }}
                >
                    {
                        data?.map((item, index) => {
                            return (
                                <SwiperSlide key={index} className="pb-4">
                                    <div className={`flex flex-col cursor-pointer hover:md:translate-y-2 hover:transition-all hover:duration-200 items-start p-6 h-[300px] md:h-[540px] w-full bg-cover bg-no-repeat rounded-md relative`}
                                        style={{
                                            backgroundImage: `url(${item?.banner})`
                                        }}>
                                        <h1 className="font-poppins700 text-white text-2xl md:text-4xl">{item?.title}</h1>
                                        {/* <div className="absolute right-10 bottom-4 w-[35px] h-[35px] flex justify-center items-center bg-[#FED837] rounded-md">
                                        <Image
                                            src={"/assets/home/investasi/arrow.png"}
                                            alt="arrow"
                                            width={25}
                                            height={25}
                                        />
                                    </div> */}
                                    </div>
                                </SwiperSlide>
                            )
                        })
                    }
                </Swiper>
            </div>
            <div className="w-full hidden justify-end pr-8 gap-2 md:flex">
                <div onClick={() => swiper?.slidePrev()} className="w-[40px] h-[40px] rounded-full cursor-pointer flex items-center justify-center border border-black">
                    <ArrowLeftOutlined />
                </div>
                <div onClick={() => swiper?.slideNext()} className="w-[40px] h-[40px] rounded-full cursor-pointer flex items-center justify-center border border-black">
                    <ArrowRightOutlined />
                </div>
            </div>
            <div className="w-full flex justify-end pr-8 gap-2 md:hidden">
                <div onClick={() => swiperMobile?.slidePrev()} className="w-[40px] h-[40px] rounded-full cursor-pointer flex items-center justify-center border border-black">
                    <ArrowLeftOutlined />
                </div>
                <div onClick={() => swiperMobile?.slideNext()} className="w-[40px] h-[40px] rounded-full cursor-pointer flex items-center justify-center border border-black">
                    <ArrowRightOutlined />
                </div>
            </div>
        </div>
    );
}