<template>
    <!-- Modal Backdrop -->
    <div v-if="isOpen" class="fixed inset-0 bg-gray-500 bg-opacity-50 flex justify-center items-center z-50">
      <!-- Modal Content -->
      <div class="bg-white rounded-lg w-full max-w-md p-6">
        <div class="flex justify-between items-center mb-4">
          <!-- Modal Header -->
          <h2 class="text-xl font-semibold text-gray-800">{{ title }}</h2>
          <button @click="close" class="text-gray-500 hover:text-gray-800">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-5 h-5">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        
        <!-- Modal Body (can be passed as slot) -->
        <div class="mb-4">
          <slot></slot>
        </div>
        
        <!-- Modal Footer (Buttons) -->
        <div class="flex justify-end space-x-4">
          <button @click="close" class="px-4 py-2 bg-gray-300 rounded-lg text-gray-700 hover:bg-gray-400">Cancel</button>
          <button @click="confirmAction" class="px-4 py-2 bg-blue-500 rounded-lg text-white hover:bg-blue-600">Confirm</button>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  // Props for passing title and handling actions
  const props = defineProps({
    title: {
      type: String,
      default: 'Modal Title'
    },
    isOpen: {
      type: Boolean,
      required: true
    }
  })
  
  // Emits to communicate with the parent component
  const emit = defineEmits(['update:isOpen', 'confirm'])
  
  const close = () => {
    emit('update:isOpen', false) // Close modal when 'Cancel' or close button is clicked
  }
  
  const confirmAction = () => {
    emit('confirm') // Trigger confirmation action (like saving or deleting data)
    close() // Close the modal after confirming
  }
  </script>
  
  <style scoped>
  /* Modal Styling */
  button:focus {
    outline: none;
  }
  
  button:hover {
    cursor: pointer;
  }
  </style>
  