<script setup>
const props = defineProps({
  code: {
    type: String,
    required: true
  }
})

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

onMounted(() => {
  // 确保按钮在代码块内部正确定位
  if (buttonRef.value) {
    const preElement = buttonRef.value.closest('pre')
    if (preElement) {
      preElement.style.position = 'relative'
    }
  }
})

const copyCode = () => {
  navigator.clipboard.writeText(props.code).then(() => {
    copied.value = true
    setTimeout(() => {
      copied.value = false
    }, 2000)
  })
}
</script>

<template>
  <div class="code-block-wrapper">
    <slot />
    <button
      ref="buttonRef"
      @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>

<style>
.code-block-wrapper {
  display: block;
  width: 100%;
}

.code-block-wrapper pre {
  margin: 0;
  position: relative;
}

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

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

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

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

.copy-button.copied:hover {
  background-color: rgba(5, 150, 105, 1) !important;
}
</style>
