Destructive alert with icon and action buttons

<script setup lang="ts">
import { Alert, AlertDescription, AlertTitle } from "@/components/reui/alert"
</script>

<template>
  <Alert variant="destructive">
    <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"
      aria-hidden="true"
      class="lucide lucide-circle-alert"
    >
      <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>
    <AlertTitle>Payment Failed</AlertTitle>
    <AlertDescription>
      <p>Please check your payment details:</p>
      <ul class="mt-1 list-inside list-disc space-y-0.5 text-sm">
        <li>Card number and expiry</li>
        <li>Billing address</li>
        <li>Available funds</li>
      </ul>
    </AlertDescription>
  </Alert>
</template>