---
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 band-inverse install" aria-labelledby="install-h">
  <div class="install-inner">
    <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 class="table-scroll targets">
      <table>
        <tbody>
          {
            c.targets.map((t) => (
              <tr>
                <th scope="row">{t.name}</th>
                <td class="mono">{t.path}</td>
              </tr>
            ))
          }
        </tbody>
      </table>
    </div>

    <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>
</section>

<style>
  .install { display: grid; grid-template-columns: subgrid; }
  .install-inner { grid-column: main; }
  .install-lead { margin-block: var(--space-3) var(--space-5); }
  .targets { margin-top: var(--space-6); }
  .targets th[scope="row"] { font-weight: 400; color: var(--ink); letter-spacing: 0; }
  .cmds { margin: var(--space-5) 0 0; }
  .cmd-row { padding-block: var(--space-3); border-top: 1px solid var(--line); }
  .cmd-row:last-child { border-bottom: 1px solid var(--line); }
  dt { margin-bottom: var(--space-1); }
  dd { margin: 0; font-size: var(--step-0); }
</style>