'use client'

import { useState } from 'react'

/* FAQ accordions — port of the subscription page's faq-button toggle. */
export default function Faq({ items }: { items: { q: string; a: string }[] }) {
  const [openIdx, setOpenIdx] = useState<number | null>(0)

  return (
    <div className="faq-list">
      {items.map((item, i) => {
        const open = openIdx === i
        return (
          <article className={`faq-item${open ? ' open' : ''}`} key={i}>
            <button
              className="faq-button"
              type="button"
              aria-expanded={open}
              onClick={() => setOpenIdx(open ? null : i)}
            >
              <span>{item.q}</span><span aria-hidden="true">{open ? '−' : '+'}</span>
            </button>
            <div className="faq-answer" hidden={!open}>{item.a}</div>
          </article>
        )
      })}
    </div>
  )
}