Task success confirmation

<!--
  Оригинал использует IconPlaceholder и `Checkbox` (тот же блокер, что у
  `ui-checkbox`) внутри AlertDialogContent — не монтируется в закрытом
  состоянии, диф не проверяет. Путь lucide "check".
-->
<script setup lang="ts">
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
</script>

<template>
  <AlertDialog>
    <AlertDialogTrigger as-child>
      <Button variant="outline">Task Status</Button>
    </AlertDialogTrigger>
    <AlertDialogContent>
      <div class="flex items-center gap-3 py-1">
        <div class="rounded-full flex size-10 items-center justify-center bg-emerald-50 text-emerald-500 dark:bg-emerald-950 dark:text-emerald-300">
          <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="size-5"
          ><path d="M20 6 9 17l-5-5" /></svg>
        </div>
        <div class="flex flex-col justify-center gap-1">
          <AlertDialogTitle class="text-sm font-semibold">Task successful</AlertDialogTitle>
          <AlertDialogDescription class="text-muted-foreground text-sm">
            Your task has been completed successfully.
          </AlertDialogDescription>
        </div>
      </div>
      <AlertDialogFooter class="items-center gap-4 sm:justify-between">
        <div class="flex items-center gap-2">
          <Checkbox id="show-again" />
          <Label for="show-again" class="text-muted-foreground font-normal">Don't show again</Label>
        </div>
        <div class="flex items-center gap-2">
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Confirm</AlertDialogAction>
        </div>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</template>