import type { ReactNode } from 'react';

interface DisclosureProps {
  summary: string;
  children: ReactNode;
}

/** Collapsible help/explainer block — keeps secondary content out of the way. */
export function Disclosure({ summary, children }: DisclosureProps) {
  return (
    <details className="glass-sm group">
      <summary className="flex min-h-11 cursor-pointer select-none items-center gap-2 px-4 py-2.5 text-xs font-medium text-gray-400 transition-colors hover:text-gray-200 [&::-webkit-details-marker]:hidden">
        <span className="inline-block transition-transform duration-200 group-open:rotate-90">▸</span>
        {summary}
      </summary>
      <div className="px-4 pb-4 pt-1 text-sm text-gray-300">{children}</div>
    </details>
  );
}