アコーディオン

'use client'

import { useId, useState, type ReactNode } from 'react'
import s from './Accordion.module.scss'

export type AccordionItem = {
  /** 見出し（質問） */
  question: ReactNode
  /** 開いたときの中身 */
  answer: ReactNode
}

/**
 * アコーディオン。よくある質問や補足情報を折りたたむUI。
 *
 * a11y:
 *   - 開閉状態は button の aria-expanded に出す（見た目の記号だけに頼らない）
 *   - aria-controls でパネルと紐づけ、閉じているあいだは hidden にして
 *     読み上げ・Tab移動の対象から外す
 *   - Tabで移動し Enter / Space で開閉できる（button 要素なので既定で満たす）
 *
 * `single` を立てると同時に開くのは1つだけになる。
 */
export function Accordion({
  items,
  single = false,
  flush = false,
}: {
  items: AccordionItem[]
  single?: boolean
  /** 上端の罫線を出さない（デモ枠の中で使うとき用） */
  flush?: boolean
}) {
  const baseId = useId()
  const [open, setOpen] = useState<number[]>([])

  const toggle = (i: number) => {
    setOpen((prev) => {
      const isOpen = prev.includes(i)
      if (single) return isOpen ? [] : [i]
      return isOpen ? prev.filter((n) => n !== i) : [...prev, i]
    })
  }

  return (
    <ul className={[s.acc, flush && s.flush].filter(Boolean).join(' ')}>
      {items.map((item, i) => {
        const panelId = `${baseId}-panel-${i}`
        const isOpen = open.includes(i)
        return (
          <li className={s.item} key={i}>
            <button
              className={s.btn}
              type="button"
              aria-expanded={isOpen}
              aria-controls={panelId}
              onClick={() => toggle(i)}
            >
              <span className={s.q}>{item.question}</span>
              <span className={s.sign} aria-hidden="true" />
            </button>
            <div className={s.panel} id={panelId} hidden={!isOpen}>
              {item.answer}
            </div>
          </li>
        )
      })}
    </ul>
  )
}