import Image from "next/image";

export type FaqItem = {
  question: string;
  answer: string;
};

type FaqAccordionGroupProps = {
  groupId: string;
  title: string;
  items: FaqItem[];
  headingTag?: "h2" | "h3";
  boxClassName?: string;
};

export default function FaqAccordionGroup({
  groupId,
  title,
  items,
  headingTag = "h3",
  boxClassName,
}: FaqAccordionGroupProps) {
  const Heading = headingTag;

  return (
    <div className={`faq-box${boxClassName ? ` ${boxClassName}` : ""}`}>
      <Heading
        className="faq-title"
        data-aos="fade-up"
        data-aos-duration="900"
        data-aos-delay="400"
      >
        {title}
      </Heading>

      <div
        className="accordion vs-accordion"
        id={groupId}
        data-aos="fade-up"
        data-aos-duration="900"
        data-aos-delay="500"
      >
        {items.map((item, index) => {
          const sequence = index + 1;
          const headingId = `${groupId}-heading-${sequence}`;
          const collapseId = `${groupId}-collapse-${sequence}`;
          const isFirst = index === 0;

          return (
            <div className="accordion-item" key={item.question}>
              <h2 className="accordion-header" id={headingId}>
                <button
                  className={`accordion-button${isFirst ? "" : " collapsed"}`}
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target={`#${collapseId}`}
                  aria-expanded={isFirst}
                  aria-controls={collapseId}
                >
                  <span>{`${sequence}. ${item.question}`}</span>
                  <span className="arrow-btn">
                    <Image
                      src="/assets/images/icon/faq-icon.svg"
                      alt="FAQ icon"
                      width={8}
                      height={8}
                    />
                  </span>
                </button>
              </h2>

              <div
                id={collapseId}
                className={`accordion-collapse collapse${isFirst ? " show" : ""}`}
                role="region"
                aria-labelledby={headingId}
                data-bs-parent={`#${groupId}`}
              >
                <div className="accordion-body">{item.answer}</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}