<script setup lang="ts">
import { Trash2 } from '@lucide/vue';
import ConfirmDialog from '@/components/ConfirmDialog.vue';
import { Button } from '@/components/ui/button';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { useDestroy } from '@/composables/useDestroy';

const props = defineProps<{
    actionUrl: string;
    title?: string;
    description?: string;
    errorMessage?: string;
    tooltip?: string;
    tooltipClass?: string;
    buttonClass?: string;
    disabled?: boolean;
    onSuccess?: () => void;
    onError?: (errors: Record<string, string>) => string | void;
}>();

const { open, processing, destroy } = useDestroy({
    url: props.actionUrl,
    errorMessage: props.errorMessage ?? 'Gagal menghapus data.',
    onSuccess: props.onSuccess,
    onError: props.onError,
});
</script>

<template>
    <Tooltip>
        <TooltipTrigger as-child>
            <span class="inline-flex">
                <Button variant="ghost" size="icon" class="text-destructive hover:text-destructive size-8"
                    :class="buttonClass" :disabled="disabled" @click="!disabled && (open = true)">
                    <Trash2 class="size-4" />
                    <span class="sr-only">{{ tooltip || 'Hapus' }}</span>
                </Button>
            </span>
        </TooltipTrigger>
        <TooltipContent :class="tooltipClass">{{ tooltip || 'Hapus' }}</TooltipContent>
    </Tooltip>

    <ConfirmDialog v-model:open="open" :title="title || 'Hapus data?'"
        :description="description || 'Data akan dihapus secara permanen. Tindakan ini tidak dapat dibatalkan.'"
        confirm-label="Hapus" cancel-label="Batal" destructive :loading="processing" @confirm="destroy" />
</template>
