<template>
  <div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
    <div class="w-full max-w-2xl max-h-[80vh] flex flex-col bg-[#1b1026] border-4 border-[#4a3b5e] shadow-[0_0_20px_rgba(0,0,0,0.5)] relative animate-in fade-in zoom-in duration-200">
      <!-- Header -->
      <div class="flex items-center justify-between p-2 border-b-2 border-[#4a3b5e] bg-[#231533]">
        <h2 class="text-[#f6b26b] font-bold tracking-[0.2em] ml-2 text-sm md:text-base">{{ title }}</h2>
        <button @click="$emit('close')" class="p-1 hover:bg-[#d95763] hover:text-white text-[#8f80a0] transition-colors">
          <X :size="18" />
        </button>
      </div>
      
      <!-- Content -->
      <div class="flex-grow overflow-y-auto p-4 custom-scrollbar text-[#e0d8f0]">
        <slot />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { X } from 'lucide-vue-next';

interface Props {
  isOpen: boolean;
  title: string;
}

defineProps<Props>();
defineEmits(['close']);
</script>

<style scoped>
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #0f0816;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #4a3b5e;
  border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #f6b26b;
}
</style>
