"use client";

import { useState } from "react";

export default function Faq({ items }: { items: { q: string; a: string }[] }) {
  const [open, setOpen] = useState(0);
  return (
    <div className="faq">
      {items.map((it, i) => {
        const isOpen = open === i;
        return (
          <div key={it.q} className={`faq__item ${isOpen ? "faq__item--open" : ""}`}>
            <button
              onClick={() => setOpen(isOpen ? -1 : i)}
              className="faq__trigger"
            >
              <span className="faq__question">{it.q}</span>
              <span className="faq__icon">{isOpen ? "✕" : "+"}</span>
            </button>
            <div className={`faq__panel ${isOpen ? "faq__panel--open" : ""}`}>
              <div className="faq__panel-inner">
                <p className="faq__answer">{it.a}</p>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}