---
import CopyCommand from "./CopyCommand.astro";
import type { Content } from "../i18n/content";

interface Props { c: Content["install"]; ui: Content["ui"]; }
const { c, ui } = Astro.props;
---


<section class="full install" aria-labelledby="install-h">
  <div class="install-grid">
    <div class="install-head">
      <h2 id="install-h">{c.h2}</h2>
      <p class="lead install-lead">{c.lead}</p>
      <CopyCommand command={c.command} copyLabel={ui.copy} copiedLabel={ui.copied} />
    </div>

    <div class="install-body">
      <ul class="targets">
        {
          c.targets.map((t) => (
            <li>
              <span class="t-name">{t.name}</span>
              <span class="t-path mono muted">{t.path}</span>
            </li>
          ))
        }
      </ul>

      <dl class="cmds">
        {
          c.commands.map((x) => (
            <div class="cmd-row">
              <dt class="mono">{x.cmd}</dt>
              <dd class="muted">{x.what}</dd>
            </div>
          ))
        }
      </dl>
    </div>
  </div>
</section>

<style>
  .install { padding-block: var(--space-8); }
  .install-grid {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--space-4);
    display: grid;
    gap: var(--space-6);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .install-lead { margin-block: var(--space-3) var(--space-5); max-width: 26em; }

  .targets { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
  .targets li {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    justify-content: space-between;
    padding-block: var(--space-2);
    border-bottom: 1px solid var(--line);
  }
  .t-name { font-weight: 500; }
  .t-path { font-size: var(--mono-size); }

  .cmds { margin: 0; display: grid; gap: var(--space-3); }
  .cmd-row {
    display: grid;
    gap: var(--space-1);
    padding-block: var(--space-3);
    border-top: 1px solid var(--line);
  }
  .cmd-row:last-child { border-bottom: 1px solid var(--line); }
  dt { color: var(--accent); }
  dd { margin: 0; font-size: var(--step-0); }

  @media (max-width: 820px) {
    .install-grid { grid-template-columns: 1fr; }
  }
</style>
