<script setup lang="ts">
import type { TaskStatus } from '~/services/dto/task-status'

defineProps<{
    statuses: TaskStatus[]
    x: number
    y: number
}>()

const emit = defineEmits<{
    pick: [status: TaskStatus]
    cancel: []
}>()
</script>

<template>
    <Teleport to="body">
        <div class="fixed inset-0 z-[60]" @click="emit('cancel')" />
        <div
            class="fixed z-[61] min-w-44 rounded-lg border border-neutral-200 bg-white py-1 shadow-xl"
            :style="{ left: x + 'px', top: y + 'px' }"
        >
            <button
                v-for="s in statuses"
                :key="s.id"
                type="button"
                class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-neutral-50"
                @click="emit('pick', s)"
            >
                <span class="h-3 w-3 shrink-0 rounded-full" :style="{ backgroundColor: s.color }" />
                {{ s.label }}
            </button>
        </div>
    </Teleport>
</template>
