import { useState } from 'react'

export function CollapsibleSection({
  title,
  summary,
  defaultOpen = false,
  children,
  className = '',
}) {
  const [open, setOpen] = useState(defaultOpen)

  return (
    <section className={`collapsible-section card ${className}`.trim()}>
      <button
        type="button"
        className="collapsible-section-trigger"
        onClick={() => setOpen((v) => !v)}
        aria-expanded={open}
      >
        <span className="collapsible-section-title">{title}</span>
        {summary && <span className="collapsible-section-summary muted">{summary}</span>}
        <span className="collapsible-section-chevron" aria-hidden="true">
          {open ? '▾' : '▸'}
        </span>
      </button>
      {open && <div className="collapsible-section-body">{children}</div>}
    </section>
  )
}