import { useState } from "react";

interface CollapsibleSectionProps {
  title: string;
  children: React.ReactNode;
  defaultOpen?: boolean;
}

/** Service grouping in the conversation list — the spec's flat section header. */
const CollapsibleSection = ({
  title,
  children,
  defaultOpen = true,
}: CollapsibleSectionProps) => {
  const [isOpen, setIsOpen] = useState(defaultOpen);

  return (
    <div className="chat-group">
      <button
        type="button"
        className="chat-group__header"
        aria-expanded={isOpen}
        onClick={() => setIsOpen((prev) => !prev)}
      >
        <span className="chat-section-label">{title}</span>
        <span className="chat-group__chevron" aria-hidden="true">
          {isOpen ? "▴" : "▾"}
        </span>
      </button>
      {isOpen && <div className="chat-group__body">{children}</div>}
    </div>
  );
};

export default CollapsibleSection;