import React, { useEffect, useRef, useState } from "react";

//  Import Slick Slider
import Slider from 'react-slick';

//  Import Image
import testiIcon03 from "/assets/images/testimonial/testi-icon-03.png"
import testiIcon05 from "/assets/images/testimonial/testi-icon-05.png"

import author1 from "/assets/images/testimonial/author-1.png"
import author5 from "/assets/images/testimonial/author-5.png"
import { Container } from "react-bootstrap";

const Testimonial = (props) => {

    const { classNames } = props

    // --- SlickSlider Setting ---
    const sliderSettings1 = {
        infinite: true,
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 1,
        centerMode: true,
        arrows: false,
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1,
                    infinite: true,
                    centerMode: true
                }
            },
            {
                breakpoint: 990,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1,
                    centerMode: false
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1,
                    centerMode: false
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ],
    };


    const sliderSettings2 = {
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                }
            },
            {
                breakpoint: 767,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            },
            {
                breakpoint: 479,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    };
    const sliderSettings3 = {
        dots: true,
        infinite: true,
        speed: 500,
        centerMode: true,
        slidesToShow: 5,
        slidesToScroll: 1,
        arrows: false,

        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1,
                    centerMode: true
                },
            },
            {
                breakpoint: 990,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1,
                    centerMode: false
                },
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1,
                    centerMode: false
                },
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    centerMode: false
                },
            }
        ]
    };

    const [nav1, setNav1] = useState(null);
    const [nav2, setNav2] = useState(null);
    const [nav3, setNav3] = useState(null);
    let sliderRef1 = useRef(null);
    let sliderRef2 = useRef(null);
    let sliderRef3 = useRef(null);

    useEffect(() => {
        setNav1(sliderRef1);
        setNav2(sliderRef2);
        setNav3(sliderRef3);
    }, []);

    return (
        <>
            <section className={`section-padding testimonial-inner ${classNames}`}>
                <Container >
                    <Slider {...sliderSettings1} asNavFor={nav2} ref={slider => (sliderRef1 = slider)} className="custom-slick-banner">
                        <div className="text-center justify-content-center d-flex">
                            <img alt="image-testimonial" src={testiIcon05} />
                        </div>
                        <div className="text-center justify-content-center d-flex">
                            <img alt="image-testimonial" src={testiIcon03} />
                        </div>
                    </Slider>

                    <div className="testimonial-top">
                        <Slider{...sliderSettings2} asNavFor={nav3} ref={slider => (sliderRef2 = slider)}>
                            <div className="text-desc">
                                <p className="testimonial-desc h3 fw-normal text-center fst-italic ">Velocity is crucial in
                                    .....
                                </p>
                            </div>

                        </Slider>
                    </div>
                    {/* <div className="testimonial-thumbs2"> */}
                    <Slider className="testimonial-thumbs2" {...sliderSettings3} asNavFor={nav1}
                        ref={slider => (sliderRef3 = slider)}>
                        <div className="slick-slide">
                            <div className="testimonial-avtar d-flex justify-content-center gap-3">
                                <img alt="img-testimonial" className="img-fluid center-block img-testimonial" src={author5} />
                                <div className="author">
                                    <h5 className="title mb-2">Jason Roger</h5>
                                    <span className="designation">Designer</span>
                                </div>
                            </div>
                        </div>
                        <div className="slick-slide">
                            <div className="testimonial-avtar d-flex justify-content-center gap-3">
                                <img alt="img-testimonial" className="img-fluid center-block img-testimonial" src={author1} />
                                <div className="author">
                                    <h5 className="title mb-2">Jennifer Walker</h5>
                                    <span className="designation">Designer</span>
                                </div>
                            </div>
                        </div>
                    </Slider>
                    {/* </div> */}
                </Container>
            </section>
        </>
    )
}
export default Testimonial