frondend/components/Course/CourseImagesSilder.tsx

"use client"
import React, { useState } from 'react'
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
import './slick.css'
import { CoursesProps } from "@/types";
import { IoIosArrowForward, IoIosArrowBack } from "react-icons/io";

const SamplePrevArrow = (props: any) => {
    const { onClick } = props;
    return (
        <div
            id='prev'
            onClick={onClick}
            className="group flex h-12 w-12 rounded-full bg-[#F2D6D5] justify-center items-center absolute top-1/2 -translate-x-1/2 -left-8 transform -translate-y-1/2 z-10 cursor-pointer hover:bg-[#D60050]"

        >
            <IoIosArrowBack className='text-black mr-1 group-hover:text-white transition-colors duration-200' size={30} />
        </div>
    );
}


function SampleNextArrow(props: any) {
    const { onClick } = props;
    return (
        <div
            id='next'
            onClick={onClick}
            className="group flex h-12 w-12 rounded-full bg-[#F2D6D5] justify-center items-center absolute top-1/2  -translate-x-1/2 -right-20 transform -translate-y-1/2 z-10 cursor-pointer hover:bg-[#D60050]"
        >
            <IoIosArrowForward className='text-black ml-1 group-hover:text-white transition-colors duration-200' size={30} />
        </div>
    );
}

const CourseImagesSilder = ({ courseData }: { courseData: CoursesProps }) => {
    const [currentSlide, setCurrentSlide] = useState(0);
    const settings = {
        arrows: false,
        className: "center",
        centerMode: true,
        infinite: true,
        centerPadding: "30px",
        dots: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        beforeChange: (current: number, next: number) => setCurrentSlide(next),
        appendDots: (dots: any) => (
            <div
                style={{
                    width: '100%',
                    position: 'absolute',
                    bottom: '24px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                }}
            >
                <ul> {dots} </ul>
            </div>
        ),
        dotsClass: 'dots_custom'
    };

    const settings2 = {
        fade: true,
        centerMode: true,
        infinite: true,
        dots: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        nextArrow: <SampleNextArrow to="next" />,
        prevArrow: <SamplePrevArrow to="prev" />,
        beforeChange: (current: number, next: number) => setCurrentSlide(next),
        appendDots: (dots: any) => (
            <div
                style={{
                    width: '100%',
                    position: 'absolute',
                    bottom: '24px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                }}
            >
                <ul> {dots} </ul>
            </div>
        ),
        dotsClass: 'dots_custom'
    };




    return (

        <div className='w-full h-auto my-20'>

            <div className='relative  mx-[15vw] justify-between items-center hidden lg:flex'>
                {courseData.images.length > 0 && (
                    <div className="w-full ">
                        <Slider className="w-full h-[40vw]" {...settings2}>
                            {courseData.images.map((image, index) => (
                                <div key={index} className="relative w-full h-[35vw] transition-all justify-items-center mb-28 ">
                                    <img
                                        src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${image.image}`}
                                        alt={`Course Image ${index + 1}`}
                                        className="w-full h-full object-cover object-center rounded-xl "
                                    />
                                </div>
                            ))}
                        </Slider>

                    </div>
                )}
            </div>
            <div className='relative flex  justify-between items-center sm:block md:block lg:hidden xl:hidden 2xl:hidden'>
                {courseData.images.length > 0 && (
                    <div className="w-full">
                        <Slider  {...settings}>
                            {courseData.images.map((image, index) => {
                                return (
                                    <div key={index} className="px-4">
                                        <div key={index} className="relative h-[38vw] transition-all justify-items-center mb-16">
                                            <img
                                                src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${image.image}`}
                                                alt={`Course Image ${index + 1}`}
                                                className="w-full h-full object-cover object-center rounded-xl"
                                            />
                                            {index !== currentSlide && (
                                                <div
                                                    className="absolute inset-0 bg-white bg-opacity-50 transition-opacity duration-300 rounded-xl"
                                                    style={{
                                                        objectFit: 'cover',
                                                        objectPosition: 'center'
                                                    }}
                                                ></div>
                                            )}
                                        </div>
                                    </div>
                                )
                            })}
                        </Slider>
                    </div>
                )}
            </div>
        </div>



    )
}

export default CourseImagesSilder