"use client";

import { useMemo, useState } from "react";
import Image from "next/image";
import { faqData } from "@/data/help/faqData";

export default function FAQSection() {
  const initialActiveItems = useMemo(() => {
    return faqData.columns.reduce<Record<number, number>>((acc, column) => {
      const firstExpandedItem = column.items.find((item) => item.expanded);
      acc[column.id] = firstExpandedItem ? firstExpandedItem.id : column.items[0].id;
      return acc;
    }, {});
  }, []);

  const [activeItems, setActiveItems] =
    useState<Record<number, number>>(initialActiveItems);

  const handleItemClick = (columnId: number, itemId: number) => {
    setActiveItems((prev) => ({
      ...prev,
      [columnId]: itemId,
    }));
  };

  return (
    <section className="faq-sec space-bottom">
      <div className="carousel-container">
        <div className="row">
          {faqData.columns.map((column, columnIndex) => (
            <div className={column.wrapperClass} key={column.id}>
              <div className={columnIndex === 0 ? "faq-info" : undefined}>
                <div className="faq-box2">
                  <div
                    className="accordion vs-accordion"
                    id={column.accordionId}
                    data-aos="fade-up"
                    data-aos-duration={900}
                    data-aos-delay={column.aosDelay}
                  >
                    {column.items.map((item) => (
                      <div
                        className={`accordion-item${
                          activeItems[column.id] === item.id ? " active" : ""
                        }`}
                        key={item.id}
                      >
                        <h2 className="accordion-header" id={item.headingId}>
                          <button
                            className={`accordion-button${
                              item.expanded ? "" : " collapsed"
                            }`}
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target={`#${item.collapseId}`}
                            aria-expanded={item.expanded}
                            aria-controls={item.collapseId}
                            onClick={() => handleItemClick(column.id, item.id)}
                          >
                            <span>{item.question}</span>
                            <span className="arrow-btn">
                              <Image
                                src={faqData.icon}
                                alt={faqData.iconAlt}
                                width={8}
                                height={8}
                              />
                            </span>
                          </button>
                        </h2>
                        <div
                          id={item.collapseId}
                          className={`accordion-collapse collapse${
                            item.expanded ? " show" : ""
                          }`}
                          role="region"
                          aria-labelledby={item.headingId}
                          data-bs-parent={`#${column.accordionId}`}
                        >
                          <div className="accordion-body">{item.answer}</div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}