<template>
  <div class="cb">
    <pre><code>{{ command }}</code></pre>
    <button class="cb-copy" :title="t('stores.copy')" @click="copy">
      <i :class="copied ? 'fa-solid fa-check' : 'fa-regular fa-copy'"></i>
    </button>
  </div>
</template>

<script setup lang="ts">
// The page shows five of these — install, restart, CLI, uninstall — so the
// block and its copy button live in one place rather than being repeated.
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'

const { command } = defineProps<{ command: string }>()
const { t } = useI18n()
const copied = ref(false)

async function copy() {
  try {
    await navigator.clipboard.writeText(command)
    copied.value = true
    setTimeout(() => { copied.value = false }, 2000)
  } catch {
    // Clipboard API needs a secure context — the command stays selectable anyway.
  }
}
</script>

<style scoped>
.cb {
  @apply relative bg-gray-900 text-gray-100 rounded-xl overflow-x-auto;
}
.cb pre {
  @apply p-4 pr-14 font-mono text-sm leading-relaxed;
}
.cb-copy {
  @apply absolute top-2 right-2 w-9 h-9 rounded-lg bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white transition-colors;
}
</style>
