"use client";
import { useState } from "react";
import { FAQ } from "@/app/components/faqs/readFaqCSV";
import RichText from "@/app/components/rich-text";
type Props = {
  faqs: FAQ[];
};

export default function FAQAccordion({ faqs }: Props) {
  const [openIndexes, setOpenIndexes] = useState<number[]>([]);

  const toggleFAQ = (index: number) => {
    setOpenIndexes((prev) =>
      prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index],
    );
  };

  const expandAll = () => setOpenIndexes(faqs.map((_, index) => index));
  const collapseAll = () => setOpenIndexes([]);

  return (
    <div className="relative flex flex-col gap-5 py-10 md:flex-row md:gap-20 md:py-20">
      <div className="relative flex w-full flex-col md:w-[30%]">
        <h1>General Faqs</h1>
        <div className="sticky top-20 hidden gap-4 py-5 md:flex">
          <button onClick={expandAll} className="btn-link">
            Expand All
          </button>
          <button onClick={collapseAll} className="btn-link">
            Collapse All
          </button>
        </div>
      </div>
      <div className="flex w-full flex-col md:w-[50%]">
        <div className="sticky top-14 mb-2 flex gap-4 p-5 md:hidden bg-gray-100">
          <button onClick={expandAll} className="btn-link">
            Expand All
          </button>
          <button onClick={collapseAll} className="btn-link">
            Collapse All
          </button>
        </div>
        <div className="flex flex-col gap-2">
          {faqs.map((faq, index) => (
            <div
              key={index}
              className="flex flex-col gap-2 bg-white/50 p-5 md:px-10 md:py-8"
            >
              <div
                onClick={() => toggleFAQ(index)}
                className="font-bogart text-lg font-light md:text-2xl/8"
              >
                {faq.question}
              </div>
              {openIndexes.includes(index) && (
                <div className="flex flex-col pb-5 text-sm text-gray-950/80">
                  <RichText initialHtml={faq.answer} />
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}