Fold Accordion

'use client'

import { useId, useState } from 'react'

export interface FoldItem {
  question: string
  answer: React.ReactNode
}

export interface FoldAccordionProps {
  items: FoldItem[]
  /** Allow several items open at once. */
  multiple?: boolean
  defaultOpen?: number[]
  /** Section heading level for the triggers (keeps document outline valid). */
  headingLevel?: 2 | 3 | 4
  className?: string
}

/**
 * A numbered FAQ accordion. Panels animate their real height with
 * grid-template-rows (0fr → 1fr) — no measuring, no layout jank — and the
 * plus mark folds into a minus.
 */
export function FoldAccordion({ items, multiple, defaultOpen = [], headingLevel = 3, className }: FoldAccordionProps) {
  const [open, setOpen] = useState<number[]>(defaultOpen)
  const base = useId()
  const H = `h${headingLevel}` as 'h3'

  const toggle = (i: number) =>
    setOpen((o) => (o.includes(i) ? o.filter((x) => x !== i) : multiple ? [...o, i] : [i]))

  return (
    <div className={['w-full max-w-3xl divide-y divide-neutral-200 border-y border-neutral-200 dark:divide-neutral-800 dark:border-neutral-800', className].filter(Boolean).join(' ')}>
      {items.map((item, i) => {
        const isOpen = open.includes(i)
        return (
          <div key={i} className="group">
            <H className="m-0">
              <button
                type="button"
                id={`${base}-t${i}`}
                aria-expanded={isOpen}
                aria-controls={`${base}-p${i}`}
                onClick={() => toggle(i)}
                className="flex w-full items-baseline gap-5 py-5 text-left outline-none focus-visible:bg-neutral-50 sm:gap-8 sm:py-6 dark:focus-visible:bg-neutral-900"
              >
                <span className="w-6 shrink-0 font-mono text-xs tabular-nums text-neutral-400 transition-colors group-hover:text-neutral-900 dark:text-neutral-500 dark:group-hover:text-neutral-100">
                  {String(i + 1).padStart(2, '0')}
                </span>
                <span className="flex-1 text-[17px] font-medium leading-snug tracking-[-0.015em] text-neutral-900 sm:text-[19px] dark:text-neutral-100">
                  {item.question}
                </span>
                <span aria-hidden className="relative mt-1 size-3.5 shrink-0 text-neutral-500 dark:text-neutral-400">
                  <span className="absolute left-0 top-1/2 h-[1.5px] w-full -translate-y-1/2 rounded bg-current" />
                  <span
                    className={[
                      'absolute left-1/2 top-0 h-full w-[1.5px] -translate-x-1/2 rounded bg-current transition-transform duration-500 ease-[cubic-bezier(.22,1,.36,1)]',
                      isOpen ? 'rotate-90 scale-y-0' : '',
                    ].join(' ')}
                  />
                </span>
              </button>
            </H>
            <div
              id={`${base}-p${i}`}
              role="region"
              aria-labelledby={`${base}-t${i}`}
              className={[
                'grid transition-[grid-template-rows,opacity] duration-500 ease-[cubic-bezier(.22,1,.36,1)] motion-reduce:transition-none',
                isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0',
              ].join(' ')}
              inert={!isOpen}
            >
              <div className="overflow-hidden">
                <div
                  className={[
                    'pb-6 pl-11 pr-8 text-[15px] leading-relaxed text-neutral-600 transition-transform duration-500 ease-[cubic-bezier(.22,1,.36,1)] sm:pl-14 dark:text-neutral-400',
                    isOpen ? 'translate-y-0' : '-translate-y-2',
                  ].join(' ')}
                >
                  {item.answer}
                </div>
              </div>
            </div>
          </div>
        )
      })}
    </div>
  )
}