export function ContextHelp({
  title,
  description,
  examples,
  guidance,
  examplesLabel,
  scopeNote,
}: {
  title: string;
  description: string;
  examples: string;
  guidance: string;
  examplesLabel: string;
  scopeNote?: string | undefined;
}) {
  return (
    <aside aria-label={title} className="space-y-2 rounded-lg border bg-muted/40 p-4 text-sm">
      <p className="font-medium">{title}</p>
      <p className="text-muted-foreground">{description}</p>
      {scopeNote && <p>{scopeNote}</p>}
      <details className="group">
        <summary className="cursor-pointer rounded-sm font-medium text-primary focus-visible:outline-2 focus-visible:outline-ring">
          {examplesLabel}
        </summary>
        <div className="mt-2 space-y-2 text-muted-foreground">
          <p>{examples}</p>
          <p>{guidance}</p>
        </div>
      </details>
    </aside>
  );
}