interface TestimonialsProps {
    data: {
        heading: string;
        subheading: string;
        videoUrl: string;
        videoThumbnail: string;
        items: {
            name: string;
            role: string;
            country: string;
            rating: number;
            comment: string;
            avatar: string;
        }[];
    };
}

const Testimonials = ({ data }: TestimonialsProps) => {
    return (
        <section className="testimonial-section section-padding pb-0 fix">
            <div className="container">
                <div className="section-title text-center">
                    <span className="sub-title wow fadeInUp">{data.subheading}</span>
                    <h2 className="split-text-right split-text-in-right">
                        {data.heading}
                    </h2>
                </div>
                <div className="testimonial-wrapper">
                    <div className="row g-4">
                        <div className="col-lg-4">
                            <div className="testimonia-image tp-clip-anim p-relative">
                                <img src={data.videoThumbnail} alt="img" className="tp-anim-img" data-animate="true" />
                                <a href={data.videoUrl} className="video-btn video-popup">
                                    <i className="fa-solid fa-play"></i></a>
                                <h5>Real stories</h5>
                            </div>
                        </div>
                        <div className="col-lg-8">
                            <div className="swiper testimonial-slider">
                                <div className="swiper-wrapper">
                                    {data.items.map((testimonial, index) => (
                                        <div key={index} className="swiper-slide">
                                            <div className="testimonial-box">
                                                <div className="star">
                                                    {Array.from({ length: testimonial.rating }).map((_, i) => (
                                                        <i key={i} className="fa-solid fa-star"></i>
                                                    ))}
                                                </div>
                                                <p>
                                                    {testimonial.comment}
                                                </p>
                                                <div className="info-item">
                                                    <div className="client-image">
                                                        <img src={testimonial.avatar} alt="img" />
                                                    </div>
                                                    <div className="content">
                                                        <h5>{testimonial.name}</h5>
                                                        <span>{testimonial.country}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default Testimonials;