---
// CodeBlock — `<pre>` on `--ink` with gold text. Default treatment matches
// `.worktrees pre` from `styles.css` and the dark pre blocks across the
// guide (rule stage-detail, skill-detail, example-grid, copy-lab, prompt-card,
// install-skills). It is the one canonical "code on dark" surface — every
// page-level variation (the `.skills>pre` lighter text, the `.builder-artifact`
// grid backdrop, etc.) layers extra styles on top via the call site.
//
// `tone` flips between the warm `--gold` (default) and the lighter `--paper`
// for the few blocks that read as documentation rather than terminal output.

interface Props {
  /** Text colour, mapped to a token. Default is the warm gold used on every
   *  current `.worktrees pre` and rule `.stage-detail pre` style. */
  tone?: 'gold' | 'paper';
  /** Optional accessible label. Use when the contents have no heading context. */
  label?: string;
}

const { tone = 'gold', label } = Astro.props;
---

<pre class:list={['code-block', `tone-${tone}`]} aria-label={label}>
  <code><slot /></code>
</pre>

<style>
  .code-block {
    margin: 32px 0 0;
    padding: 20px;
    overflow: auto;
    color: var(--gold);
    background: var(--ink);
  }

  /* Deliberately no font declaration. `.worktrees pre` — the block this
     component reproduces — sets none either, so the text inherits the UA
     default for `pre`. Declaring one here would change how the page renders,
     which is a redesign, not a refactor.
     Two *other* legacy blocks do set one, and neither is this component's job:
     `chapters.css .panel code` (14px/1.8 ui-monospace) and
     `skills-review/styles.css .preview code` (12px/1.65 ui-monospace). Whoever
     migrates those needs tokens for them first. */

  /* Lighter text used by `.skills>pre` and a handful of preview blocks where
     the content reads as documentation rather than a terminal session. */
  .tone-paper {
    color: var(--paper);
  }
</style>
