<script setup lang="ts">
defineProps<{
  x: number;
  y: number;
  target: "map" | "object";
  objectName?: string;
}>();

const emit = defineEmits<{
  create: [];
  edit: [];
  delete: [];
}>();
</script>

<template>
  <div
    class="context-menu"
    :style="{ left: `${x}px`, top: `${y}px` }"
    @click.stop
  >
    <p v-if="target === 'object' && objectName" class="title">{{ objectName }}</p>

    <template v-if="target === 'map'">
      <button type="button" @click="emit('create')">Создать объект</button>
    </template>

    <template v-else>
      <button type="button" @click="emit('edit')">Редактировать</button>
      <button type="button" class="danger" @click="emit('delete')">Удалить</button>
    </template>
  </div>
</template>

<style scoped>
.context-menu {
  position: fixed;
  z-index: 1000;
  min-width: 200px;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.title {
  margin: 0;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666;
  background: #f8f8f8;
  border-bottom: 1px solid #eee;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button {
  display: block;
  width: 100%;
  padding: 0.625rem 1rem;
  border: none;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

button:hover {
  background: #f0f4ff;
}

button.danger {
  color: #b91c1c;
}

button.danger:hover {
  background: #fee2e2;
}
</style>
