<template>
  <Teleport to="body">
    <div
      v-if="show"
      class="fixed inset-0 z-50 flex items-center justify-center px-4"
    >
      <div
        class="fixed inset-0 bg-black/50 backdrop-blur-sm"
        @click="handleCancel"
      ></div>
      <FrostedGlass class="w-full max-w-sm p-6 relative z-10" :bg-opacity="90" blur-level="md">
        <h3 class="text-lg font-medium mb-2">{{ title }}</h3>
        <p class="text-gray-600 text-sm mb-6">{{ message }}</p>
        <div class="flex justify-end space-x-3">
          <button
            @click="handleCancel"
            class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800"
          >
            取消
          </button>
          <button
            @click="handleConfirm"
            class="px-4 py-2 text-sm text-white bg-red-500 hover:bg-red-600 rounded-lg"
          >
            确认
          </button>
        </div>
      </FrostedGlass>
    </div>
  </Teleport>
</template>

<script setup>
import FrostedGlass from './FrostedGlass.vue'

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '确认'
  },
  message: {
    type: String,
    required: true
  }
})

const emit = defineEmits(['confirm', 'cancel', 'update:show'])

const handleConfirm = () => {
  emit('confirm')
  emit('update:show', false)
}

const handleCancel = () => {
  emit('cancel')
  emit('update:show', false)
}
</script>