Billing warning for expired subscriptions or failed payments

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

<template>
  <AlertDialog>
    <AlertDialogTrigger as-child>
      <Button variant="outline">Subscription Expiring</Button>
    </AlertDialogTrigger>
    <AlertDialogContent class="gap-0 p-0 sm:max-w-sm">
      <div class="mx-auto flex flex-col items-center justify-center gap-2 p-8">
        <AlertDialogMedia class="bg-destructive/10 text-destructive dark:bg-destructive/20 size-12 rounded-full">
          <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-6"
          ><path d="M10.268 21a2 2 0 0 0 3.464 0" /><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" /></svg>
        </AlertDialogMedia>
        <AlertDialogTitle class="text-center">Subscription Expiring Soon</AlertDialogTitle>
        <Badge variant="destructive-light" class="font-normal">Expires in 2 days</Badge>
      </div>

      <div class="bg-muted/60 flex flex-col items-center justify-center gap-5 rounded-b-2xl p-6">
        <AlertDialogDescription class="text-muted-foreground text-center">
          Your current plan will expire in 2 days. Update your payment method now to ensure uninterrupted access to
          your Pro features.
        </AlertDialogDescription>
        <AlertDialogFooter class="-mx-6 -mb-6 gap-4 self-stretch rounded-b-2xl p-6">
          <AlertDialogCancel>Remind Me Later</AlertDialogCancel>
          <AlertDialogAction>Update Payment</AlertDialogAction>
        </AlertDialogFooter>
      </div>
    </AlertDialogContent>
  </AlertDialog>
</template>