"use client";

import Image from "next/image";
import { useEffect } from "react";
import { homeFaqContent } from "@/data/home/faq";

export default function FaqSection() {
  const { items, illustrationSrc, illustrationAlt } = homeFaqContent;

  useEffect(() => {
    if (typeof window === "undefined") return;

    const handleShow = (e: Event) => {
      const item = (e.target as HTMLElement).closest(".accordion-item");
      if (item) item.classList.add("active");
    };

    const handleHide = (e: Event) => {
      const item = (e.target as HTMLElement).closest(".accordion-item");
      if (item) item.classList.remove("active");
    };

    document.addEventListener("show.bs.collapse", handleShow);
    document.addEventListener("hide.bs.collapse", handleHide);

    return () => {
      document.removeEventListener("show.bs.collapse", handleShow);
      document.removeEventListener("hide.bs.collapse", handleHide);
    };
  }, []);

  return (
    <div className="row">
      <div className="col-lg-6">
        <div className="faq-box v2">
          <div
            className="accordion vs-accordion"
            id="accordionHomeFaq"
            data-aos="fade-up"
            data-aos-duration="900"
            data-aos-delay="300"
          >
            {items.map((item) => {
              const collapseId = `homeFaqCollapse-${item.id}`;
              const headingId = `homeFaqHeading-${item.id}`;
              const collapseClass = item.defaultOpen
                ? "accordion-collapse collapse show"
                : "accordion-collapse collapse";
              const collapsed = item.defaultOpen ? "" : " collapsed";
              return (
                <div key={item.id} className={`accordion-item ${item.defaultOpen ? "active" : ""}`}>
                  <h2 className="accordion-header" id={headingId}>
                    <button
                      className={`accordion-button${collapsed}`}
                      type="button"
                      data-bs-toggle="collapse"
                      data-bs-target={`#${collapseId}`}
                      aria-expanded={item.defaultOpen}
                      aria-controls={collapseId}
                    >
                      <span>{item.question}</span>
                    </button>
                  </h2>
                  <div
                    id={collapseId}
                    className={collapseClass}
                    role="region"
                    aria-labelledby={headingId}
                    data-bs-parent="#accordionHomeFaq"
                  >
                    <div className="accordion-body">{item.answer}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
      <div className="col-lg-6">
        <div
          className="faq-img"
          data-aos="fade-up"
          data-aos-duration="900"
          data-aos-delay="500"
        >
          <Image
            src={illustrationSrc}
            alt={illustrationAlt}
            width={640}
            height={520}
          />
        </div>
      </div>
    </div>
  );
}