<script setup lang="ts">
import { Link, router } from '@inertiajs/vue3';
import { MoreHorizontal, Pencil, Trash2 } from '@lucide/vue';
import { toast } from 'vue-sonner';
import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import type { EmployeeListItem } from '@/types/employee';

const props = defineProps<{
    employee: EmployeeListItem;
}>();

function destroyEmployee() {
    if (!confirm(`Hapus pegawai ${props.employee.full_name ?? ''}?`)) {
        return;
    }

    router.delete(`/admin/hr/employees/${props.employee.id}`, {
        onError: () => {
            toast.error('Gagal menghapus pegawai.');
        },
    });
}
</script>

<template>
    <DropdownMenu>
        <DropdownMenuTrigger as-child>
            <Button variant="ghost" class="h-8 w-8 p-0">
                <span class="sr-only">Buka menu</span>
                <MoreHorizontal class="size-4" />
            </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
            <DropdownMenuLabel>Aksi</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem as-child>
                <Link :href="`/admin/hr/employees/${employee.id}/edit`" class="flex items-center gap-2">
                    <Pencil class="size-4" />
                    Ubah
                </Link>
            </DropdownMenuItem>
            <DropdownMenuItem
                class="text-destructive focus:text-destructive flex items-center gap-2"
                @click="destroyEmployee"
            >
                <Trash2 class="size-4" />
                Hapus
            </DropdownMenuItem>
        </DropdownMenuContent>
    </DropdownMenu>
</template>
