<template>
  <div class="flex flex-col items-center py-5 px-3 fixed bottom-14 right-0">
    <div class="self-end mt-2 flex gap-2">
      <button @mousedown.stop @click="handleDelete" class="btn-red py-1.5 px-4">
        <img src="/assets/icons/trashcan.svg" class="w-4 h-4" alt="Delete" />
      </button>
      <button @mousedown.stop @click="handleRotate" class="btn-cyan py-1.5 px-4">Rotate</button>
      <button @mousedown.stop @click="handleMove" class="btn-cyan py-1.5 px-4 min-w-24">Move</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { PlacedMapObject } from '@/application/types'

const props = defineProps<{
  placedMapObject: PlacedMapObject
}>()

const emit = defineEmits(['move', 'rotate', 'delete'])

const handleMove = () => {
  emit('move', props.placedMapObject.id)
}

const handleRotate = () => {
  emit('rotate', props.placedMapObject.id)
}

const handleDelete = () => {
  emit('delete', props.placedMapObject.id)
}
</script>