export type HomeTestimonial = {
    name: string;
    title: string;
    message: string;
    photoUrl: string;
    rating: string | null;
};

export function HomeTestimonials({ testimonials }: { testimonials: HomeTestimonial[] }) {
    if (testimonials.length === 0) {
        return null;
    }

    return (
        <>
                <section className="testimonials-section-2 pt-100 md-pt-80 pb-100 md-pb-80" data-img-src="/assets/images/testimonials/testimonials-bg.svg">
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-12">
                                <div className="section-title text-center wow fadeInUp" data-wow-delay=".2s">
                                    <span className="sub-title">Testimonials</span>
                                    <h2>Hear from our satisfied customers</h2>
                                </div>
                            </div>
                        </div>
                        <div className="row">
                            <div className="col-lg-12">
                                <div className="swiper testimonials-slider-three">
                                    <div className="swiper-wrapper">
                                        {testimonials.map((item) => (
                                            <div className="swiper-slide" key={item.name}>
                                                <div className="testimonials-item style-two">
                                                    <div className="testimonials-content">
                                                        <div className="testimonials-quote">
                                                            <figure>
                                                                <img src="/assets/images/testimonials/quote.png" alt="" />
                                                            </figure>
                                                        </div>
                                                        <p>&quot;{item.message}&quot;</p>
                                                    </div>
                                                    <div className="testimonials-author">
                                                        <div className="testimonials-author-image">
                                                            <figure>
                                                                <img src={item.photoUrl} alt="" />
                                                            </figure>
                                                            {item.rating && (
                                                                <div className="testimonials-review">
                                                                    <i className="fa-solid fa-star active"></i>
                                                                    <span>{item.rating}</span>
                                                                </div>
                                                            )}
                                                        </div>
                                                        <div className="testimonials-author-content">
                                                            <h2>{item.name}</h2>
                                                            <p>{item.title}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
        </>
    );
}