import { type HomeFaqItem } from '@frontend/components/sections/HomeFaq';
import { type HomePartner } from '@frontend/components/sections/HomePartners';
import { type HomeTestimonial } from '@frontend/components/sections/HomeTestimonials';

type AboutStoriesProps = {
    partners: HomePartner[];
    testimonials: HomeTestimonial[];
    faqs: HomeFaqItem[];
};

export function AboutStories({ partners, testimonials, faqs }: AboutStoriesProps) {
    return (
        <>
            {testimonials.length > 0 && (
                <section className="testimonials-section-4 extra-color 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-two">
                                    <div className="swiper-wrapper">
                                        {testimonials.map((item) => (
                                            <div className="swiper-slide" key={item.name}>
                                                <div className="testimonials-item">
                                                    <div className="testimonials-content">
                                                        <div className="testimonials-content-top">
                                                            <div className="testimonials-quote">
                                                                <figure>
                                                                    <img src="/assets/images/testimonials/quote.png" alt="" />
                                                                </figure>
                                                            </div>
                                                            <p>&quot;{item.message}&quot;</p>
                                                        </div>
                                                    </div>
                                                    <div className="testimonials-author">
                                                        <div className="testimonials-author-image">
                                                            <figure>
                                                                <img src={item.photoUrl} alt="" />
                                                            </figure>
                                                        </div>
                                                        <div className="testimonials-author-content">
                                                            <h2>{item.name}</h2>
                                                            <p>{item.title}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            )}

            {faqs.length > 0 && (
                <section className="faq-section pt-100 md-pt-80">
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-6">
                                <div className="faq-image">
                                    <figure className="image-anime">
                                        <img src="/assets/images/faq/about-faq.jpg" alt="faq image" />
                                    </figure>
                                </div>
                            </div>
                            <div className="col-lg-6">
                                <div className="section-title mb-30">
                                    <span className="sub-title">FAQ&apos;s</span>
                                    <h2>Most Questions that Asked by People.</h2>
                                </div>
                                <div className="accordion" id="about-faq">
                                    {faqs.map((faq, index) => (
                                        <div className="accordion-item" key={faq.question}>
                                            <h2 className="accordion-header" id={`about-faq-${index}`}>
                                                <button className={index === 0 ? 'accordion-button' : 'accordion-button collapsed'} type="button" data-bs-toggle="collapse" data-bs-target={`#about-faq-panel-${index}`} aria-expanded={index === 0} aria-controls={`about-faq-panel-${index}`}>
                                                    {faq.question}
                                                </button>
                                            </h2>
                                            <div id={`about-faq-panel-${index}`} className={index === 0 ? 'accordion-collapse collapse show' : 'accordion-collapse collapse'} aria-labelledby={`about-faq-${index}`} data-bs-parent="#about-faq">
                                                <div className="accordion-body">
                                                    <div className="inner">
                                                        <div className="accordion-content">
                                                            <p>{faq.answer}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            )}

            {partners.length > 0 && (
                <div className="partners-section-1 pt-100 md-pt-80 pb-100 md-pb-80">
                    <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">Our Partner</span>
                                    <h2>Partners Who Trust Industries</h2>
                                </div>
                            </div>
                        </div>
                        <div className="row">
                            <div className="col-12">
                                <div className="swiper partners-slider">
                                    <div className="swiper-wrapper">
                                        {partners.map((partner) => (
                                            <div className="swiper-slide" key={partner.name}>
                                                <div className="partners-item">
                                                    <div className="partners-image text-center">
                                                        <figure>
                                                            <img src={partner.logoUrl} alt={partner.name} />
                                                        </figure>
                                                    </div>
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </>
    );
}