Account deactivation confirmation

<!-- Иконка внутри AlertDialogContent не монтируется в закрытом состоянии; путь lucide "circle-alert". -->
<script setup lang="ts">
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"
</script>

<template>
  <AlertDialog>
    <AlertDialogTrigger as-child>
      <Button variant="destructive">Deactivate Account</Button>
    </AlertDialogTrigger>
    <AlertDialogContent>
      <div class="flex items-start gap-3 py-1">
        <div class="bg-destructive/10 dark:bg-destructive/10 rounded-full flex size-10 shrink-0 items-center justify-center">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="text-destructive size-5"
          ><circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line x1="12" x2="12.01" y1="16" y2="16" /></svg>
        </div>
        <div class="flex flex-col justify-center gap-1">
          <AlertDialogTitle class="text-sm font-semibold">Deactivate your account?</AlertDialogTitle>
          <AlertDialogDescription class="text-muted-foreground text-sm">
            This will disable your account and remove your profile from all active searches.
          </AlertDialogDescription>
        </div>
      </div>
      <AlertDialogFooter>
        <AlertDialogCancel>Keep My Account</AlertDialogCancel>
        <AlertDialogAction variant="destructive">Deactivate Anyway</AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</template>