import Link from 'next/link';

interface FAQSectionProps {
    data: {
        heading: string;
        subheading: string;
        description: string;
        ctaButton: {
            label: string;
            href: string;
        };
        items: {
            question: string;
            answer: string;
        }[];
    };
}

const FAQSection = ({ data }: FAQSectionProps) => {
    return (
        <section className="faq-section section-padding fix">
            <div className="container">
                <div className="faq-wrapper">
                    <div className="row g-4">
                        <div className="col-lg-5">
                            <div className="faq-content">
                                <div className="section-title mb-0">
                                    <span className="sub-title wow fadeInUp">{data.subheading}</span>
                                    <h2 className="split-text-right split-text-in-right">
                                        {data.heading}
                                    </h2>
                                </div>
                                <p className="text">
                                    {data.description}
                                </p>
                                <Link href={data.ctaButton.href} className="theme-btn">
                                    {data.ctaButton.label}
                                    <i className="fa-solid fa-arrow-right"></i>
                                </Link>
                            </div>
                        </div>
                        <div className="col-lg-7">
                            <div className="faq-items">
                                <div className="accordion" id="accordionExample">
                                    {data.items.map((item, index) => (
                                        <div key={index} className="accordion-item wow fadeInUp" data-wow-delay={`.${(index + 1) * 2}s`}>
                                            <h5 className="accordion-header" id={`heading${index}`}>
                                                <button 
                                                    className={`accordion-button ${index !== 1 ? 'collapsed' : ''}`} 
                                                    type="button" 
                                                    data-bs-toggle="collapse"
                                                    data-bs-target={`#collapse${index}`} 
                                                    aria-expanded={index === 1 ? 'true' : 'false'} 
                                                    aria-controls={`collapse${index}`}
                                                >
                                                    {item.question}
                                                </button>
                                            </h5>
                                            <div 
                                                id={`collapse${index}`} 
                                                className={`accordion-collapse collapse ${index === 1 ? 'show' : ''}`} 
                                                aria-labelledby={`heading${index}`}
                                                data-bs-parent="#accordionExample"
                                            >
                                                <div className="accordion-body">
                                                    <p>
                                                        {item.answer}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default FAQSection;