"use client";

import { useState } from "react";

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

interface FaqAccordionProps {
  faqs: FaqItem[];
  defaultOpenIndex?: number | null;
}

export default function FaqAccordion({
  faqs,
  defaultOpenIndex = 0,
}: FaqAccordionProps) {
  const [activeIndex, setActiveIndex] = useState<number | null>(
    defaultOpenIndex
  );

  const toggle = (index: number) => {
    setActiveIndex((prev) => (prev === index ? null : index));
  };

  return (
    <div className="accordion">
      {faqs?.map((item, idx) => {
        const isOpen = activeIndex === idx;

        return (
          <div key={idx} className="accordion-item bg-transparent">
            <h2 className="accordion-header d-flex justify-between align-items-center">

              <button
                type="button"
                className={`accordion-button bg-transparent text-white ${
                  !isOpen ? "collapsed" : ""
                }`}
                onClick={() => toggle(idx)}
                aria-expanded={isOpen}
              >
                {item.question}
              </button>
            </h2>

            <div
              className={`accordion-collapse collapse ${
                isOpen ? "show" : ""
              }`}
            >
              <div className="accordion-body text-white">
                {item.answer}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}