<template>
  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50" @click.self="$emit('close')">
    <div 
      :class="modalSizeClasses"
      class="bg-white rounded-lg shadow-lg relative max-h-[90vh] overflow-y-auto"
      @click.stop
    >
      <!-- Header with Title and Close Button -->
      <div class="flex items-center justify-between p-6 border-b border-gray-200">
        <h2 v-if="title" class="text-xl font-semibold text-gray-900">
          {{ title }}
        </h2>
        <button
          @click="$emit('close')"
          class="text-gray-400 hover:text-gray-600 transition-colors p-1"
          aria-label="Close modal"
        >
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- Modal Content -->
      <div class="p-6">
        <slot>
          <div class="text-center">
            <p class="text-sm text-gray-600">Modal content goes here.</p>
          </div>
        </slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

// Props
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  size: {
    type: String,
    default: 'medium',
    validator: (value) => ['small', 'medium', 'large', 'xl'].includes(value)
  }
})

// Emits
defineEmits(['close'])

// Computed properties
const modalSizeClasses = computed(() => {
  const sizeMap = {
    small: 'w-full max-w-md',
    medium: 'w-full max-w-lg',
    large: 'w-full max-w-2xl',
    xl: 'w-full max-w-4xl'
  }
  return sizeMap[props.size] || sizeMap.medium
})
</script>

<style scoped>
/* Ensure the modal appears above other content */
.fixed {
  position: fixed;
}

/* Smooth transitions */
.transition-colors {
  transition-property: color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Scrollbar styling for modal content */
.overflow-y-auto::-webkit-scrollbar {
  width: 6px;
}

.overflow-y-auto::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>