import React from "react";

/**
 * SideNavGroup — a presentational wrapper that renders an optional group
 * label (10px uppercase, tracking-widest) and a hairline divider, then
 * passes the nav item children through unchanged.
 *
 * Used by AdminSidebar to chunk the long list of admin links into the
 * 7 IA groups defined in `docs/superpowers/specs/2026-06-17-admin-redesign.md`
 * (Workspace · Operations · Communications · Growth · Tracking · Insights · Settings).
 *
 * `collapsed` is a future-proofing prop for a per-group collapse toggle;
 * it visually hides the children but keeps the label + divider in place.
 */
type SideNavGroupProps = {
  label?: string;
  children: React.ReactNode;
  collapsed?: boolean;
};

export default function SideNavGroup({
  label,
  children,
  collapsed = false,
}: SideNavGroupProps) {
  return (
    <section
      className="px-3 pb-3"
      aria-label={label ? `${label} section` : undefined}
    >
      {label && (
        <div
          className="flex items-center gap-2 px-3 pt-3 pb-2 mb-1 border-b"
          style={{ borderColor: "rgba(208, 203, 180, 0.12)" }}
        >
          <span
            className="text-[10px] font-semibold uppercase tracking-widest select-none"
            style={{ color: "rgba(184, 180, 168, 0.5)" }}
          >
            {label}
          </span>
        </div>
      )}
      <ul className="space-y-1" hidden={collapsed}>
        {children}
      </ul>
    </section>
  );
}