import type { ReactNode } from "react";
/**
* The wizard's side notes: what a step teaches, in the project's voice.
* `honest` renders the italic honest-scope line — the "what this does NOT
* prove" that the docs insist on saying plainly.
*/
export function TeachingAside({
title,
children,
honest,
}: {
title?: string;
children: ReactNode;
honest?: ReactNode;
}) {
return (
<aside className="jac-aside">
{title ? <strong>{title}</strong> : null}
<div style={{ marginTop: title ? 8 : 0 }}>{children}</div>
{honest ? <span className="jac-honest">Honest scope: {honest}</span> : null}
</aside>
);
}