<script setup lang="ts">
import { ref } from "vue";

const visible = ref(false);

function open() {
  visible.value = true;
}

function close() {
  visible.value = false;
}

defineExpose({ open });
</script>

<template>
  <Teleport to="body">
    <div v-if="visible" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60" @click.self="close">
      <div class="bg-zinc-800 border border-zinc-700 rounded-xl shadow-2xl p-6 w-[400px]">
        <h2 class="text-lg font-semibold text-zinc-100 mb-4">Import Connections</h2>
        <p class="text-sm text-zinc-400 mb-6">
          Import is not available in this version. Add connections manually via the sidebar.
        </p>
        <div class="flex justify-end">
          <button
            class="px-4 py-2 text-sm bg-zinc-700 hover:bg-zinc-600 text-zinc-200 rounded-lg"
            @click="close"
          >
            Close
          </button>
        </div>
      </div>
    </div>
  </Teleport>
</template>
