---
import type { InstallCard } from "../../data/content.ts";

interface Props {
  cards: InstallCard[];
}
const { cards } = Astro.props;
---
<div class="install">
  {cards.map((c) => (
    <div class="card">
      <div class="lab">
        <b>{c.label}</b>
        <span>{c.channel}</span>
      </div>
      <pre set:html={c.lines.join("\n")}></pre>
    </div>
  ))}
</div>
<style>
  .install { display: grid; gap: 20px; }
  .card {
    border: 1px solid var(--line);
    background: var(--paper);
  }
  .lab {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--paper-dim);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .lab b { color: var(--ink); font-weight: 700; }
  pre {
    margin: 0;
    padding: 16px;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.7;
    overflow-x: auto;
    white-space: pre;
    color: var(--ink);
    background: transparent;
    border: none;
  }
  pre :global(.p) { color: var(--ink-dim); user-select: none; padding-right: 8px; }
  pre :global(.c) { color: var(--ink-dim); }
</style>
