<script lang="ts">
  import type { Area, Step } from "./api";
  import { renderLine } from "./markup";

  let {
    step,
    areas,
    current = false,
    showOptionals = true,
  }: {
    step: Step;
    areas: Record<string, Area>;
    current?: boolean;
    showOptionals?: boolean;
  } = $props();

  const lines = $derived(
    step.lines
      .map((l) => renderLine(l, areas))
      .filter((l) => showOptionals || l.kind !== "optional"),
  );
</script>

<div class="step" class:current>
  {#each lines as line}
    <div class="line {line.kind}" class:indent={line.indent > 0}>
      {@html line.html}
    </div>
  {/each}
</div>

<style>
  .step {
    padding: 6px 10px;
    border-left: 3px solid transparent;
  }
  .step.current {
    border-left-color: var(--accent);
    background: rgba(200, 162, 74, 0.08);
  }
  .line {
    line-height: 1.35;
    margin: 1px 0;
  }
  .line.hint {
    color: var(--muted);
    font-size: 0.9em;
  }
  .line.optional {
    color: #9fb88f;
    font-size: 0.95em;
  }
  .line.info {
    color: #d8a0a0;
    font-size: 0.95em;
  }
  .line.indent {
    padding-left: 16px;
  }
  :global(.step .area) {
    color: var(--accent2);
    font-weight: 600;
    text-transform: capitalize;
  }
  :global(.step .chip) {
    display: inline-block;
    padding: 0 5px;
    margin: 0 1px;
    border-radius: 4px;
    font-size: 0.82em;
    vertical-align: middle;
    background: #2a2218;
    border: 1px solid var(--border);
  }
  :global(.step .chip.quest) {
    background: #2a2030;
    border-color: #5a4a6a;
    color: #c9a6e0;
  }
  :global(.step .chip.img) {
    background: #23282e;
    border-color: #3a4654;
    color: #a9c4dd;
  }
  :global(.step .icon) {
    height: 1.25em;
    width: auto;
    vertical-align: -0.25em;
    margin: 0 1px;
    image-rendering: -webkit-optimize-contrast;
  }
</style>
