frondend/components/Course/Collapse.tsx

import React, { useState, useRef, useEffect } from 'react'
import { cn } from '../utils'
import { VscAdd, VscChromeMinimize } from "react-icons/vsc";
import { imageProps, } from '@/types';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
import './slick.css'

interface CollapseProps {
    title: string
    children?: string
    className?: string
    info?: boolean
    info_images?: Array<imageProps>


}

const Collapse: React.FC<CollapseProps> = ({ title, children, className, info, info_images, }) => {
    const [currentSlide, setCurrentSlide] = useState(0);
    var settings2 = {
        arrows: false,
        infinite: true,
        //centerPadding: "30px",
        dots: true,
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 1,
        appendDots: (dots: any) => (
            <div
                style={{
                    width: '100%',
                    position: 'absolute',
                    bottom: '24px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                }}
            >
                <ul> {dots} </ul>
            </div>
        ),
        dotsClass: 'dots_custom'
    };

    var settings1 = {
        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 [isOpen, setIsOpen] = useState(false)
    const [height, setHeight] = useState<number | undefined>(0)
    const ref = useRef<HTMLDivElement>(null)

    useEffect(() => {
        if (isOpen) setHeight(ref.current?.scrollHeight)
        else setHeight(0)
    }, [isOpen])

    return (
        children && children.length > 0 ? (
            <div className={cn('mt-6 rounded-3xl ', className)}>
                <button
                    className={`flex justify-between items-center w-full p-6 text-left  ${isOpen ? "rounded-t-lg bg-mainColor" : "rounded-lg bg-[#F2D6D5] "}`}
                    onClick={() => setIsOpen(!isOpen)}
                >
                    <span className={`text-xl font-bold ml-3 ${isOpen ? "text-white " : " text-black"}`}>{title}</span>
                    {isOpen ? (
                        <VscChromeMinimize className='text-white mr-3' />
                    ) : (
                        <VscAdd className='text-black mr-3' />
                    )}

                </button>
                <div
                    ref={ref}
                    style={{ height: height, }}
                    className="flex relative overflow-hidden transition-[height] duration-300 ease-in-out "
                >
                    <div className='relative flex flex-col bg-[#FAF6F5] rounded-b-lg w-[65vw] max-sm:w-[90vw]'>

                        {info ? (<div className='relative  justify-between items-center '>

                            {info_images && info_images.length > 0 && (
                                <div className="flex flex-col relative w-ful h-auto ">
                                    <div className='relative justify-between items-center hidden lg:flex pt-10'>
                                        <Slider className=" w-full h-[17vw] px-12  " {...settings2}>
                                            {info_images.map((image, index) => (
                                                <div key={index} className="relative w-full h-[13vw] px-1 transition-all justify-items-center  ">
                                                    <img
                                                        src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${image.image}`}
                                                        alt={`Course Image ${index + 1}`}
                                                        className="w-full h-full object-cover object-center  "
                                                    />
                                                </div>
                                            ))}
                                        </Slider>
                                    </div>
                                    {/* <div className='relative flex  sm:block md:block lg:hidden xl:hidden 2xl:hidden'> */}
                                    <div className='sm:block md:block lg:hidden xl:hidden 2xl:hidden pt-10'>
                                        <Slider   {...settings1}>
                                            {info_images.map((image, index) => (
                                                <div key={index} className="px-4">
                                                    <div key={index} className="relative h-[50vw] 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 "
                                                        />
                                                        {index !== currentSlide && (
                                                            <div
                                                                className="absolute inset-0 bg-white bg-opacity-50 transition-opacity duration-300 "
                                                                style={{
                                                                    objectFit: 'cover',
                                                                    objectPosition: 'center'
                                                                }}
                                                            ></div>
                                                        )}
                                                    </div>
                                                </div>
                                            ))}
                                        </Slider>

                                    </div>
                                </div>
                            )}
                        </div>)
                            :
                            (<div></div>)}
                        <div
                            className='px-12 py-14 [&_*]:!text-[1.5rem] [&_*]:!text-gray-600 [&_*]:!bg-transparent'
                            dangerouslySetInnerHTML={{ __html: children || '' }}
                        />

                    </div>
                </div>
            </div>
        ) : (
            <div></div>
        )
    )
}
export default Collapse