<template>
  <div class="relative group">
    <pre ref="codeBlock"
      :class="[`language-${language}`, 'overflow-x-auto']"
    ><code :class="`language-${language}`"><slot /></code></pre>
    <button
      @click="copyCode"
      class="copy-button"
      :class="{ 'copied': copied }"
      type="button"
    >
      <span v-if="!copied" class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />
        </svg>
        复制
      </span>
      <span v-else class="flex items-center text-green-400">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        已复制！
      </span>
    </button>
  </div>
</template>

<script setup>
const props = defineProps({
  code: {
    type: String,
    default: ''
  },
  language: {
    type: String,
    default: 'plaintext'
  },
  filename: {
    type: String,
    default: ''
  }
})

const copied = ref(false)
const codeBlock = ref(null)

const copyCode = async () => {
  const code = props.code || codeBlock.value?.querySelector('code')?.textContent || ''
  await navigator.clipboard.writeText(code)
  copied.value = true
  setTimeout(() => {
    copied.value = false
  }, 2000)
}
</script>

<style scoped>
.copy-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  padding: 0.375rem 0.5rem;
  font-size: 0.75rem;
  color: #ffffff;
  background-color: rgba(55, 65, 81, 0.9);
  border-radius: 0.375rem;
  opacity: 0;
  transition: all 0.2s ease;
  z-index: 20;
  cursor: pointer;
  border: none;
  outline: none;
}

.group:hover .copy-button {
  opacity: 1;
}

.copy-button:hover {
  background-color: rgba(55, 65, 81, 1);
  transform: scale(1.05);
}

.copy-button.copied {
  background-color: rgba(5, 150, 105, 0.9);
}

.copy-button.copied:hover {
  background-color: rgba(5, 150, 105, 1);
}

pre {
  margin: 0;
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #1f2937;
  overflow-x: auto;
}

pre code {
  display: block;
  padding-right: 2.5rem;
  color: #e5e7eb;
  font-size: 0.875rem;
  line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
</style>
