"use client";

import { useState, type ReactNode } from "react";

export default function SettingsRegion({
  title,
  id,
  collapsed,
  children,
}: {
  title: string;
  id: string;
  collapsed: boolean;
  children: ReactNode;
}) {
  const [open, setOpen] = useState(!collapsed);
  return (
    <section id={id} className={`admin-section admin-zone config-subsection ${open ? "" : "is-collapsed"}`}>
      {collapsed && (
        <button
          type="button"
          className="config-region-toggle"
          aria-expanded={open}
          aria-controls={`${id}-content`}
          onClick={() => setOpen(!open)}
        >
          <strong>{title}</strong>
          <span>
            {open ? "Hide" : "Configure"} <b aria-hidden="true">{open ? "−" : "+"}</b>
          </span>
        </button>
      )}
      <div id={`${id}-content`} hidden={!open}>
        {children}
      </div>
    </section>
  );
}