import { useState } from 'react'

/**
 * Generischer Drill-down-Container — AP1.9d Anti-Todo-Wand.
 * Bewusst layout-neutral für späteres UI-Redesign.
 */
export function CollapsibleSection({
  title,
  lead,
  defaultCollapsed = true,
  expandLabel = 'Alle anzeigen',
  collapseLabel = 'Einklappen',
  headerActions = null,
  className = 'card',
  children,
}) {
  const [expanded, setExpanded] = useState(!defaultCollapsed)

  return (
    <section className={className}>
      <div className="section-header">
        <div>
          {title && <h2>{title}</h2>}
          {lead && <p className="section-lead muted">{lead}</p>}
        </div>
        {headerActions}
      </div>

      {expanded ? (
        <>
          {children}
          <p className="collapsible-section__toggle">
            <button
              type="button"
              className="btn btn-ghost btn-sm"
              onClick={() => setExpanded(false)}
            >
              {collapseLabel}
            </button>
          </p>
        </>
      ) : (
        <p className="collapsible-section__toggle">
          <button
            type="button"
            className="btn btn-secondary btn-sm"
            onClick={() => setExpanded(true)}
          >
            {expandLabel}
          </button>
        </p>
      )}
    </section>
  )
}