---
interface Props {
  command: string;
  copyLabel: string;
  copiedLabel: string;
  note?: string;
}
const { command, copyLabel, copiedLabel, note } = Astro.props;
---

{/* 명령어를 담는 액자. 유리를 쓰는 세 자리 중 하나다 */}
<div class="cmd-shell frame">
  <div class="cmd">
    <code class="cmd-text">{command}</code>
    <button type="button" class="btn btn-solid cmd-copy" data-copy={command} data-copied={copiedLabel}>
      <span class="cmd-copy-label">{copyLabel}</span>
      <span class="cmd-copy-icon" aria-hidden="true">
        <svg viewBox="0 0 16 16" width="12" height="12" fill="none">
          <path d="M5.5 10.5L10.5 5.5M10.5 5.5H6.5M10.5 5.5V9.5"
                stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </span>
    </button>
  </div>
</div>
{note && <p class="cmd-note muted">{note}</p>}

<style>
  .cmd-shell { max-width: 30em; min-width: 0; }
  .cmd {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  }
  .cmd-text {
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    color: var(--ink);
  }
  .cmd-text::before {
    content: "$ ";
    color: var(--ink-muted);
  }

  /* 높이·패딩·웨이트·전환은 .btn 이 정한다. 여기서는 이 자리에만
     필요한 것만 더한다 — 아이콘이 오른쪽 안쪽에 붙어야 해서 그쪽만 좁다 */
  .cmd-copy {
    flex: 0 0 auto;
    padding-right: var(--space-2);
    font-family: inherit;
  }

  .cmd-copy-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    background: color-mix(in oklab, var(--accent-ink) 18%, transparent);
    transition: transform var(--dur-quick) var(--ease-out);
  }
  .cmd-copy:hover .cmd-copy-icon { transform: translate(2px, -2px); }

  .cmd-note {
    margin-top: var(--space-2);
    font-size: var(--step-0);
  }
</style>

<script>
  // 이 페이지의 유일한 상호작용이다. 라이브러리를 쓰지 않는다.
  document.querySelectorAll<HTMLButtonElement>(".cmd-copy").forEach((btn) => {
    const label = btn.querySelector<HTMLSpanElement>(".cmd-copy-label");
    if (!label) return;
    btn.addEventListener("click", async () => {
      const text = btn.dataset["copy"] ?? "";
      const done = btn.dataset["copied"] ?? "OK";
      const original = label.textContent;
      try {
        await navigator.clipboard.writeText(text);
      } catch {
        // 클립보드 권한이 없으면 선택 상태로 만들어 사용자가 직접 복사하게 둔다
        const code = btn.parentElement?.querySelector(".cmd-text");
        if (code) {
          const range = document.createRange();
          range.selectNodeContents(code);
          const sel = getSelection();
          sel?.removeAllRanges();
          sel?.addRange(range);
        }
        return;
      }
      label.textContent = done;
      label.setAttribute("aria-live", "polite");
      setTimeout(() => { label.textContent = original; }, 1600);
    });
  });
</script>