---
interface Props {
  code: string;
}

const lines = Astro.props.code.trim().split(/\r?\n/);
---

<style lang="css">
  .pseudocode-block {
    font-family: "Times New Roman", serif;
    font-size: 1rem;
    line-height: 1.6;
  }
  .pseudocode-line {
    display: flex;
    white-space: pre-wrap;
  }
  .line-number {
    width: 2em;
    text-align: right;
    margin-right: 1em;
    user-select: none;
  }
  .line-content {
    flex: 1;
  }
</style>

<pre
  class="pseudocode-block">
  {lines.map((line, i) => (
    <div class="pseudocode-line">
      <span class="line-number">{i + 1}.</span>
      <span class="line-content">{line}</span>
    </div>
  ))}
</pre>