"use client";
/*
  This is the testimonial slider component.
*/
import React, { useEffect, useRef } from 'react'
import styles from './TestimonialSlider.module.scss'
import 'swiper/css';
import 'swiper/css/navigation';
import { Swiper, SwiperSlide } from 'swiper/react'
import { Autoplay, Navigation, Pagination } from 'swiper/modules'
import Image from 'next/image';
import ImagesConstants from '@/src/utils/ImagesConstants';

// Define the props type for the TestimonialSlider component
type TestimonialSliderProps = {
    TestimonialSlider: {
        TITLE: string;
    };
};
const TestimonialSlider = ({ TestimonialSlider }: TestimonialSliderProps) => {
    // swiper ref for custom slider arrow and navigation
    const swiperRef = useRef<{ swiper: any }>(null);
    useEffect(() => {
        if (swiperRef.current) {
            swiperRef.current.swiper.params.navigation.prevEl = ".custom-prev";
            swiperRef.current.swiper.params.navigation.nextEl = ".custom-next";
            swiperRef.current.swiper.navigation.init();
            swiperRef.current.swiper.navigation.update();
        }
    }, []);
    return (
        <>
            <section className={`${styles.TestimonialSliderWrapper} mt-[30px] sm:mt-[40px] lg:mt-[50px] xxl:mt-[65px]`}>
                <div className={`container`}>
                    <div className={`TestimonialSliderWrap relative`}>
                        {/* Heading with Swiper button start */}
                        <div className={`flex justify-between gap-4 items-center mb-4`}>
                            <h2 className={`!mb-0 !text-[25px] sm:!text-[30px] md:!text-[36px] xxxl:!text-[40px] !leading-[1.4] md:!tracking-[-1px]`}>{TestimonialSlider.TITLE}</h2>
                            {/* Swiper Button Start */}
                            <div className={`flex justify-end gap-3 shrink-0`}>
                                <button className="custom-prev"></button>
                                <button className="custom-next"></button>
                            </div>
                            {/* Swiper Button End */}
                        </div>
                        {/* Heading with Swiper button start */}

                        {/* Slider Wrapper Start */}
                        <Swiper
                            ref={swiperRef}
                            modules={[Navigation, Pagination, Autoplay]}
                            spaceBetween={35}
                            navigation={{ prevEl: ".custom-prev", nextEl: ".custom-next" }}
                            pagination={{ clickable: true }}
                            // autoplay={{ delay: 3000 }}
                            autoplay={false}
                            loop={true}
                            className={`${styles.SwiperSliderWrap} swiper-slider`}
                            breakpoints={{
                                500: { slidesPerView: 2 }, // For small screens (phones)
                                768: { slidesPerView: 2 }, // For tablets
                                992: { slidesPerView: 3 }, // For desktops
                                1440: { slidesPerView: 4 }, // For larger screens
                            }}
                        >
                            <SwiperSlide className={`${styles.SwiperSlideItem} relative !h-auto !max-h-[300px] sm:!max-h-[300px] md:!max-h-[350px] xxl:!max-h-[400px] xxxl:!max-h-[450px] rounded-[16px] sm:rounded-[20px] md:rounded-[30px] xxxl:rounded-[40px]`}>
                                <Image className={`${styles.SwiperSlideImg} w-full !h-full object-center object-cover rounded-[16px] sm:rounded-[20px] md:rounded-[30px] xxxl:rounded-[40px]`} width={500} height={500} src={ImagesConstants.USER_IMG_1} alt='user-img' />
                                {/* Content Start */}
                                <div className={`${styles.SwiperSlideContent} p-5 flex flex-col justify-between gap-4 absolute top-0 left-0 w-full h-full bg-bgColor rounded-[16px] sm:rounded-[20px] md:rounded-[30px] xxxl:rounded-[40px]`}>
                                    <div className={`flex gap-1.5 flex-col`}>
                                        <h4 className={`text-blackColor !mb-0`}>Susan Bright</h4>
                                        <p className={`!mb-0 text-grey475Color fs-18`}>Digital Nomand</p>
                                    </div>
                                    <div className={`flex gap-3 flex-col`}>
                                        <i className={`${styles.QuoteIcon} Icon IconQuote w-[24px] h-[24px] bg-primaryColor`}></i>
                                        <p className={`!mb-0 text-grey475Color fs-18 line-clamp-[6] md:line-clamp-[8]`}>blankbase has changed the game for me as a digital nomad. Finding reliable, remote-friendly homes has never been easier!</p>
                                    </div>
                                </div>
                                {/* Content End */}
                            </SwiperSlide>
                            <SwiperSlide className={`${styles.SwiperSlideItem} relative !h-auto !max-h-[300px] sm:!max-h-[300px] md:!max-h-[350px] xxl:!max-h-[400px] xxxl:!max-h-[450px] rounded-[16px] sm:rounded-[20px] md:rounded-[30px] xxxl:rounded-[40px]`}>
                                <Image className={`${styles.SwiperSlideImg} w-full !h-full object-center object-cover rounded-[16px] sm:rounded-[20px] md:rounded-[30px] xxxl:rounded-[40px]`} width={500} height={500} src={ImagesConstants.USER_IMG_2} alt='user-img' />
                                {/* Content Start */}
                                <div className={`${styles.SwiperSlideContent} p-5 flex flex-col justify-between gap-4 absolute top-0 left-0 w-full h-full bg-bgColor rounded-[16px] sm:rounded-[20px] md:rounded-[30px] xxxl:rounded-[40px]`}>
                                    <div className={`flex gap-1.5 flex-col`}>
                                        <h4 className={`text-blackColor !mb-0`}>Marco Leo</h4>
                                        <p className={`!mb-0 text-grey475Color fs-18`}>Remote Project Manager</p>
                                    </div>
                                    <div className={`flex gap-3 flex-col`}>
                                        <i className={`${styles.QuoteIcon} Icon IconQuote w-[24px] h-[24px] bg-primaryColor`}></i>
                                        <p className={`!mb-0 text-grey475Color fs-18 line-clamp-[6] md:line-clamp-[8]`}>Finally, a platform that goes beyond just accommodation for digital nomads! blankbase is going to be my one-stop shop.</p>
                                    </div>
                                </div>
                                {/* Content End */}
                            </SwiperSlide>
                            <SwiperSlide className={`${styles.SwiperSlideItem} relative !h-auto !max-h-[300px] sm:!max-h-[300px] md:!max-h-[350px] xxl:!max-h-[400px] xxxl:!max-h-[450px] rounded-[16px] sm:rounded-[20px] md:rounded-[30px] xxxl:rounded-[40px]`}>
                                <Image className={`${styles.SwiperSlideImg} w-full !h-full object-center object-cover rounded-[16px] sm:rounded-[20px] md:rounded-[30px] xxxl:rounded-[40px]`} width={500} height={500} src={ImagesConstants.USER_IMG_3} alt='user-img' />
                                {/* Content Start */}
                                <div className={`${styles.SwiperSlideContent} p-5 flex flex-col justify-between gap-4 absolute top-0 left-0 w-full h-full bg-bgColor rounded-[16px] sm:rounded-[20px] md:rounded-[30px] xxxl:rounded-[40px]`}>
                                    <div className={`flex gap-1.5 flex-col`}>
                                        <h4 className={`text-blackColor !mb-0`}>Emily Smith</h4>
                                        <p className={`!mb-0 text-grey475Color fs-18`}>Content Creator</p>
                                    </div>
                                    <div className={`flex gap-3 flex-col`}>
                                        <i className={`${styles.QuoteIcon} Icon IconQuote w-[24px] h-[24px] bg-primaryColor`}></i>
                                        <p className={`!mb-0 text-grey475Color fs-18 line-clamp-[6] md:line-clamp-[8]`}>blankbase has become my go-to platform for booking stays that prioritize workspaces and high-speed internet—things I can't compromise on as a remote worker.</p>
                                    </div>
                                </div>
                                {/* Content End */}
                            </SwiperSlide>
                            <SwiperSlide className={`${styles.SwiperSlideItem} relative !h-auto !max-h-[300px] sm:!max-h-[300px] md:!max-h-[350px] xxl:!max-h-[400px] xxxl:!max-h-[450px] rounded-[16px] sm:rounded-[20px] md:rounded-[30px] xxxl:rounded-[40px]`}>
                                <Image className={`${styles.SwiperSlideImg} w-full !h-full object-center object-cover rounded-[16px] sm:rounded-[20px] md:rounded-[30px] xxxl:rounded-[40px]`} width={500} height={500} src={ImagesConstants.USER_IMG_4} alt='user-img' />
                                {/* Content Start */}
                                <div className={`${styles.SwiperSlideContent} p-5 flex flex-col justify-between gap-4 absolute top-0 left-0 w-full h-full bg-bgColor rounded-[16px] sm:rounded-[20px] md:rounded-[30px] xxxl:rounded-[40px]`}>
                                    <div className={`flex gap-1.5 flex-col`}>
                                        <h4 className={`text-blackColor !mb-0`}>Sarah Lee</h4>
                                        <p className={`!mb-0 text-grey475Color fs-18`}>Digital Nomand</p>
                                    </div>
                                    <div className={`flex gap-3 flex-col`}>
                                        <i className={`${styles.QuoteIcon} Icon IconQuote w-[24px] h-[24px] bg-primaryColor`}></i>
                                        <p className={`!mb-0 text-grey475Color fs-18 line-clamp-[6] md:line-clamp-[8]`}>As a freelance designer, I used to struggle with finding stable places to stay while traveling. blankbase has been a lifesaver!</p>
                                    </div>
                                </div>
                                {/* Content End */}
                            </SwiperSlide>
                            <SwiperSlide className={`${styles.SwiperSlideItem} relative !h-auto !max-h-[300px] sm:!max-h-[300px] md:!max-h-[350px] xxl:!max-h-[400px] xxxl:!max-h-[450px] rounded-[16px] sm:rounded-[20px] md:rounded-[30px] xxxl:rounded-[40px]`}>
                                <Image className={`${styles.SwiperSlideImg} w-full !h-full object-center object-cover rounded-[16px] sm:rounded-[20px] md:rounded-[30px] xxxl:rounded-[40px]`} width={500} height={500} src={ImagesConstants.USER_IMG_1} alt='user-img' />
                                {/* Content Start */}
                                <div className={`${styles.SwiperSlideContent} p-5 flex flex-col justify-between gap-4 absolute top-0 left-0 w-full h-full bg-bgColor rounded-[16px] sm:rounded-[20px] md:rounded-[30px] xxxl:rounded-[40px]`}>
                                    <div className={`flex gap-1.5 flex-col`}>
                                        <h4 className={`text-blackColor !mb-0`}>Marco Leo</h4>
                                        <p className={`!mb-0 text-grey475Color fs-18`}>Digital Nomand</p>
                                    </div>
                                    <div className={`flex gap-3 flex-col`}>
                                        <i className={`${styles.QuoteIcon} Icon IconQuote w-[24px] h-[24px] bg-primaryColor`}></i>
                                        <p className={`!mb-0 text-grey475Color fs-18 line-clamp-[6] md:line-clamp-[8]`}>blankbase has changed the game for me as a digital nomad. Finding reliable, remote-friendly homes has never been easier!</p>
                                    </div>
                                </div>
                                {/* Content End */}
                            </SwiperSlide>
                            <SwiperSlide className={`${styles.SwiperSlideItem} relative !h-auto !max-h-[300px] sm:!max-h-[300px] md:!max-h-[350px] xxl:!max-h-[400px] xxxl:!max-h-[450px] rounded-[16px] sm:rounded-[20px] md:rounded-[30px] xxxl:rounded-[40px]`}>
                                <Image className={`${styles.SwiperSlideImg} w-full !h-full object-center object-cover rounded-[16px] sm:rounded-[20px] md:rounded-[30px] xxxl:rounded-[40px]`} width={500} height={500} src={ImagesConstants.USER_IMG_2} alt='user-img' />
                                {/* Content Start */}
                                <div className={`${styles.SwiperSlideContent} p-5 flex flex-col justify-between gap-4 absolute top-0 left-0 w-full h-full bg-bgColor rounded-[16px] sm:rounded-[20px] md:rounded-[30px] xxxl:rounded-[40px]`}>
                                    <div className={`flex gap-1.5 flex-col`}>
                                        <h4 className={`text-blackColor !mb-0`}>Emily Smith</h4>
                                        <p className={`!mb-0 text-grey475Color fs-18`}>Content Creator</p>
                                    </div>
                                    <div className={`flex gap-3 flex-col`}>
                                        <i className={`${styles.QuoteIcon} Icon IconQuote w-[24px] h-[24px] bg-primaryColor`}></i>
                                        <p className={`!mb-0 text-grey475Color fs-18 line-clamp-[6] md:line-clamp-[8]`}>blankbase has become my go-to platform for booking stays that prioritize workspaces and high-speed internet—things I can't compromise on as a remote worker.</p>
                                    </div>
                                </div>
                                {/* Content End */}
                            </SwiperSlide>
                        </Swiper>
                        {/* Slider Wrapper Start */}
                    </div>
                </div>
            </section>
        </>
    )
}

export default TestimonialSlider