"use client";

import { useId, useState } from "react";
import type { Faq } from "@/lib/content";
import { faqs as defaultFaqs } from "@/lib/content";

type FaqAccordionProps = {
  items?: readonly Faq[];
  id?: string;
};

export function FaqAccordion({
  items = defaultFaqs,
  id = "faqAcc",
}: FaqAccordionProps) {
  const baseId = useId();
  const [open, setOpen] = useState(0);

  return (
    <div className="accordion faq" id={id}>
      {items.map((f, i) => {
        const panelId = `${baseId}-faq${i}`;
        const isOpen = open === i;
        return (
          <div className="accordion-item" key={f.q}>
            <h3 className="accordion-header">
              <button
                className={`accordion-button${isOpen ? "" : " collapsed"}`}
                type="button"
                aria-expanded={isOpen}
                aria-controls={panelId}
                onClick={() => setOpen(isOpen ? -1 : i)}
              >
                <span className="faq-n">{String(i + 1).padStart(2, "0")}</span>
                {f.q}
              </button>
            </h3>
            <div
              id={panelId}
              className={`accordion-collapse collapse${isOpen ? " show" : ""}`}
            >
              <div className="accordion-body">{f.a}</div>
            </div>
          </div>
        );
      })}
    </div>
  );
}