"use client";

import Image from "next/image";
import { faqData, type FAQ } from "@/data/home/faqs";
import dynamic from "next/dynamic";

const FAQComponent = () => {
  return (
    <div className="faq-sec">
      <div className="sec-title">
        <span
          className="sub-title"
          data-aos="fade-up"
          data-aos-duration="900"
          data-aos-delay="300"
        >
          FAQs
        </span>
        <h2
          className="title"
          data-aos="fade-up"
          data-aos-duration="900"
          data-aos-delay="400"
        >
          Frequently Asked Questions
        </h2>
      </div>
      <div
        className="faq-box"
        data-aos="zoom-in"
        data-aos-duration="900"
        data-aos-delay="300"
      >
        <div className="accordion vs-accordion" id="accordionExample">
          {faqData.map((faq: FAQ, index) => (
            <div
              key={faq.id}
              className={`accordion-item ${index === 0 ? "show" : ""}`}
            >
              <h2 className="accordion-header" id={`heading${index + 1}`}>
                <button
                  className={`accordion-button ${index === 0 ? "" : "collapsed"}`}
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target={`#${faq.id}`}
                  aria-expanded={index === 0 ? "true" : "false"}
                  aria-controls={faq.id}
                >
                  <span>{faq.question}</span>
                  <span className="arrow-btn">
                    <Image
                      src="/assets/images/icon/faq-icon.svg"
                      alt="FAQ icon"
                      width={16}
                      height={16}
                    />
                  </span>
                </button>
              </h2>
              <div
                id={faq.id}
                className={`accordion-collapse collapse ${index === 0 ? "show" : ""}`}
                role="region"
                data-bs-parent="#accordionExample"
              >
                <div className="accordion-body">
                  {faq.answer}
                  {faq.features.length > 0 && (
                    <ul className="faq-list">
                      {faq.features.map((feature, featureIndex) => (
                        <li key={featureIndex}>
                          <Image
                            src="/assets/images/icon/check1-1.svg"
                            alt=""
                            width={16}
                            height={16}
                          />
                          {feature}
                        </li>
                      ))}
                    </ul>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default dynamic(() => Promise.resolve(FAQComponent), {
  ssr: false,
  loading: () => (
    <div className="faq-sec">
      <div className="sec-title">
        <span className="sub-title">FAQs</span>
        <h2 className="title">Frequently Asked Questions</h2>
      </div>
      <div className="faq-box">
        <div className="accordion vs-accordion">Loading...</div>
      </div>
    </div>
  ),
});