<template>
  <div
    class="overflow-hidden rounded-xl bg-slate-900 p-3 text-gray-200 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]"
  >
    <div class="mb-2 flex items-center justify-between text-[11px] uppercase tracking-[0.08em] text-gray-400">
      <span>{{ lang || 'text' }}</span>
      <button
        class="rounded-full border border-white/10 bg-white/10 px-2.5 py-1 text-[11px] text-gray-50 transition-colors hover:bg-white/15"
        @click="handleCopy"
      >
        {{ copied ? '已复制' : '复制' }}
      </button>
    </div>
    <pre class="m-0 whitespace-pre-wrap font-mono text-[13px] leading-relaxed"><code>{{ code }}</code></pre>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps<{
  code: string
  lang?: string
}>()

const copied = ref(false)

const handleCopy = async () => {
  try {
    await navigator.clipboard.writeText(props.code)
    copied.value = true
    setTimeout(() => (copied.value = false), 1500)
  } catch (e) {
    console.error(e)
  }
}
</script>
