﻿<script setup lang="ts">
defineProps<{ show: boolean }>()
const emit = defineEmits(['confirm', 'cancel'])

const confirm = () => {
  emit('confirm')
}

const cancel = () => {
  emit('cancel')
}
</script>

<template>
  <div v-if="show" class="fixed inset-0 flex items-center justify-center z-50">
    <div class="fixed inset-0 bg-black opacity-50"></div>
    <div class="bg-white rounded-lg p-6 z-10">
      <h2 class="text-lg font-semibold mb-4">Confirmation</h2>
      <p class="mb-4">Are you sure to delete this item ?</p>
      <div class="flex justify-end space-x-2">
        <button @click="confirm" class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-700">
          Ok
        </button>
        <button
          @click="cancel"
          class="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
        >
          Cancel
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* Styles pour le modal */
</style>
