import React from 'react'
import { codeExampleBlockClass } from './codeExampleStyles.js'

/**
 * Monospace invoke examples with lightweight token coloring (no extra deps).
 * Mount {@link CodeExampleStyles} once on the page (see `./index.js`).
 *
 * @param {{ actionId: string, compact?: boolean }} props
 */
export function SdkInvokeExample ({ actionId, compact = false }) {
  return (
    <pre
      className={codeExampleBlockClass}
      data-compact={compact ? 'true' : undefined}
    >
      <code>
        <span className="ds-code-example-kw">sdk.invoke</span>
        (<span className="ds-code-example-str">&apos;{actionId}&apos;</span>, {'{ … }'})
      </code>
    </pre>
  )
}

/**
 * @param {{ actionId: string, actionsUrl: string, compact?: boolean }} props
 */
export function HttpInvokeExample ({ actionId, actionsUrl, compact = false }) {
  return (
    <pre
      className={codeExampleBlockClass}
      data-compact={compact ? 'true' : undefined}
    >
      <code>
        <span className="ds-code-example-method">POST</span>{' '}
        <span className="ds-code-example-path">{actionsUrl}</span>
        {'\n'}
        {'{ '}
        <span className="ds-code-example-key">&quot;action&quot;</span>
        : <span className="ds-code-example-str">&quot;{actionId}&quot;</span>,{' '}
        <span className="ds-code-example-key">&quot;payload&quot;</span>
        : {'{ … }'}
        {' }'}
      </code>
    </pre>
  )
}
