<script setup lang="ts">
import {
    AlertDialog,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

const open = defineModel<boolean>('open', { default: false });

withDefaults(
    defineProps<{
        title: string;
        description?: string;
        confirmLabel?: string;
        cancelLabel?: string;
        destructive?: boolean;
        loading?: boolean;
    }>(),
    {
        confirmLabel: 'Ya, Lanjutkan',
        cancelLabel: 'Batal',
        destructive: false,
        loading: false,
    },
);

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

<template>
    <AlertDialog v-model:open="open">
        <AlertDialogContent>
            <AlertDialogHeader>
                <AlertDialogTitle>{{ title }}</AlertDialogTitle>
                <AlertDialogDescription v-if="description">
                    {{ description }}
                </AlertDialogDescription>
            </AlertDialogHeader>
            <slot name="content" />
            <AlertDialogFooter>
                <AlertDialogCancel :disabled="loading">
                    {{ cancelLabel }}
                </AlertDialogCancel>
                <Button
                    type="button"
                    :disabled="loading"
                    :class="cn(destructive && 'bg-destructive text-white hover:bg-destructive/90')"
                    @click="emit('confirm')"
                >
                    {{ loading ? 'Memproses...' : confirmLabel }}
                </Button>
            </AlertDialogFooter>
        </AlertDialogContent>
    </AlertDialog>
</template>
