<template>
  <Teleport to="body">
    <div v-if="open" class="modal-backdrop" @mousedown.self="$emit('close')">
      <section class="widget-library glass-panel">
        <header>
          <div>
            <span class="eyebrow">WIDGET LIBRARY</span>
            <h3>Add dashboard intelligence</h3>
            <p>Add hidden cards back to the dashboard. Drag and resize them after they are on the canvas.</p>
          </div>
          <button class="modal-close" type="button" @click="$emit('close')">x</button>
        </header>
        <div class="widget-library-grid">
          <!-- Hidden widgets are restored through the parent layout state, keeping this modal reusable. -->
          <article v-for="widget in widgets" :key="widget.id">
            <span><component :is="widget.icon" :size="20" /></span>
            <div><strong>{{ widget.title }}</strong><small>{{ widget.category }} - {{ widget.description }}</small></div>
            <button class="primary-action compact" type="button" @click="$emit('add', widget.id)">Add</button>
          </article>
          <p v-if="!widgets.length" class="widget-empty">All dashboard widgets are already visible.</p>
        </div>
      </section>
    </div>
  </Teleport>
</template>

<script setup>
defineProps({
  open: Boolean,
  widgets: { type: Array, required: true }
});

defineEmits(['close', 'add']);
</script>
