import { Col, Container, Image, Row } from "react-bootstrap";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

interface Slide {
    id: number;
    logo: string;
    image: string;
    title: string;
    description: string;
    quote: string;
    designation: string
}

const OurTestimonial = () => {
    const slides: Slide[] = [
        { 
            id: 1, 
            logo: "/images/clients-logo1.png",
            quote: "/images/quotes.png",
            image: '/images/clients-img1.png', 
            title: '- Rahul Patani',
            designation: "CEO",
            description: "A software developer can be found almost anywhere. However, pick HireDevelope as your one-stop solution partner if you're searching for a strategic partner who will get to know your company and assist you in creating and expanding your online presence over time."
        },
        { 
            id: 2, 
            logo: "/images/clients-logo2.png",
            image: '/images/clients-img2.png', 
            quote: "/images/quotes.png",
            title: '- Christoper Middleton',
            designation: "CEO",
            description: "We found in Hire developer the perfect partner. Their unmatched skills, efficient project handling, and rapid execution were instrumental in achieving our goals. They are a comprehensive solution provider that we trust and value."
        },
        { 
            id: 3, 
            logo: "/images/clients-logo2.png",
            image: '/images/clients-img3.png', 
            quote: "/images/quotes.png",
            title: '- Jayden Koh', 
            designation: "CFO in Legacy",
            description: "Working with HireDeveloper.dev on our Foodies project has been an exceptional experience. We hired three developers and one designer from their team, and their skill and dedication made all the difference. Their project management team is excellent, ensuring everything ran smoothly." 
        },
    ];
      
    const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 3000,
        arrows: false,
        centerMode: false,
        margin: 30,
        responsive: [
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 2,
                }
            },
            {
                breakpoint: 575,
                settings: {
                    slidesToShow: 1,
                }
            }
        ]
    };

    return (
        <Container className="our-testimonial">
            <Row>
                <Col md="12">
                    <h5 className="section-title m-0 text-center">
                        What <span>Our Clients</span> Have to Say
                    </h5>
                    <p className="section-subtitle mx-auto text-center">
                        Build trust, increase conversions, and watch your business thrive.
                    </p>
                </Col>
            </Row>
            <Slider {...settings}>
                {slides.map((items) => (
                    <div key={items.id} className="slide-item d-flex flex-column">
                        <div className="testimonial-top-portion d-flex flex-wrap justify-content-between align-items-start">
                            <Image className="client-logo" src={items.logo} />
                            <Image className="client-quotes" src={items.quote} />
                        </div>
                        <p>{items.description}</p>
                        <div className="client d-flex flex-wrap">
                            <div className="client-image">
                                <Image src={items.image} /> 
                            </div>
                            <div className="client-info">
                                <label>{items.title}</label>
                                <span>{items.designation}</span>
                            </div>
                        </div>
                    </div>
                ))}
            </Slider>
        </Container>
    );
};

export default OurTestimonial;