/* A collapsible group inside the side panel — Gutenberg's PanelBody idea: a
 * header row that opens and closes, several stacked, usually one open.
 *
 * It exists so "many things, one expanded" always looks the same: a tour of
 * several sections, settings in groups, an inspector with categories. The
 * head is a real button (keyboard, aria-expanded); the meta slot on the right
 * says what is inside without opening it ("3 of 5", "done", "4 points");
 * `current` marks the section the person is in. */

import type { ReactNode } from "react";

export function PanelSection({
  title, meta, open, onToggle, current, children, id,
}: {
  title: ReactNode;
  /** Right-aligned summary of what's inside ("3 of 5", "done"). */
  meta?: ReactNode;
  open: boolean;
  onToggle: () => void;
  /** The section the person is in right now. */
  current?: boolean;
  children?: ReactNode;
  id?: string;
}) {
  return (
    <section id={id}
             className={`cu-section ${open ? "is-open" : ""} ${current ? "is-current" : ""}`}>
      <button type="button" className="cu-section-head" aria-expanded={open}
              onClick={onToggle}>
        <svg className="cu-section-chev" width="12" height="12" viewBox="0 0 24 24"
             fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round"
             strokeLinejoin="round" aria-hidden="true">
          <path d="m9 6 6 6-6 6" />
        </svg>
        <span className="cu-section-title">{title}</span>
        {meta !== undefined && meta !== null && (
          <span className="cu-section-meta">{meta}</span>
        )}
      </button>
      {open && <div className="cu-section-body">{children}</div>}
    </section>
  );
}