Alert

---
import CheckCircle2Icon from "@lucide/astro/icons/circle-check"
import InfoIcon from "@lucide/astro/icons/info"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
---

<div class="grid w-full max-w-md items-start gap-4">
  <Alert>
    <CheckCircle2Icon />
    <AlertTitle>Payment successful</AlertTitle>
    <AlertDescription>
      Your payment of $29.99 has been processed. A receipt has been sent to your
      email address.
    </AlertDescription>
  </Alert>
  <Alert>
    <InfoIcon />
    <AlertTitle>New feature available</AlertTitle>
    <AlertDescription>
      We've added dark mode support. You can enable it in your account settings.
    </AlertDescription>
  </Alert>
</div>

---
import CheckCircle2Icon from "@lucide/astro/icons/circle-check"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
---

<Alert class="max-w-md">
  <CheckCircle2Icon />
  <AlertTitle>Account updated successfully</AlertTitle>
  <AlertDescription>
    Your profile information has been saved. Changes will be reflected
    immediately.
  </AlertDescription>
</Alert>

---
import AlertCircleIcon from "@lucide/astro/icons/circle-alert"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
---

<Alert variant="destructive" class="max-w-md">
  <AlertCircleIcon />
  <AlertTitle>Payment failed</AlertTitle>
  <AlertDescription>
    Your payment could not be processed. Please check your payment method and
    try again.
  </AlertDescription>
</Alert>

---
import {
  Alert,
  AlertAction,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert"
import { Button } from "@/components/ui/button"
---

<Alert class="max-w-md">
  <AlertTitle>Dark mode is now available</AlertTitle>
  <AlertDescription>
    Enable it under your profile settings to get started.
  </AlertDescription>
  <AlertAction>
    <Button size="xs" variant="default">
      Enable
    </Button>
  </AlertAction>
</Alert>

---
import AlertTriangleIcon from "@lucide/astro/icons/triangle-alert"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
---

<Alert class="max-w-md border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-50">
  <AlertTriangleIcon />
  <AlertTitle>Your subscription will expire in 3 days.</AlertTitle>
  <AlertDescription>
    Renew now to avoid service interruption or upgrade to a paid plan to
    continue using the service.
  </AlertDescription>
</Alert>

---
import CheckCircle2Icon from "@lucide/astro/icons/circle-check"
import InfoIcon from "@lucide/astro/icons/info"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

const translations = {
  en: {
    dir: "ltr",
    values: {
      paymentTitle: "Payment successful",
      paymentDescription:
        "Your payment of $29.99 has been processed. A receipt has been sent to your email address.",
      featureTitle: "New feature available",
      featureDescription:
        "We've added dark mode support. You can enable it in your account settings.",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      paymentTitle: "تم الدفع بنجاح",
      paymentDescription:
        "تمت معالجة دفعتك البالغة 29.99 دولارًا. تم إرسال إيصال إلى عنوان بريدك الإلكتروني.",
      featureTitle: "ميزة جديدة متاحة",
      featureDescription:
        "لقد أضفنا دعم الوضع الداكن. يمكنك تفعيله في إعدادات حسابك.",
    },
  },
  he: {
    dir: "rtl",
    values: {
      paymentTitle: "התשלום בוצע בהצלחה",
      paymentDescription:
        "התשלום שלך בסך 29.99 דולר עובד. קבלה נשלחה לכתובת האימייל שלך.",
      featureTitle: "תכונה חדשה זמינה",
      featureDescription:
        "הוספנו תמיכה במצב כהה. אתה יכול להפעיל אותו בהגדרות החשבון שלך.",
    },
  },
} as const

const alerts = [
  {
    icon: CheckCircle2Icon,
    titleKey: "paymentTitle",
    descriptionKey: "paymentDescription",
  },
  {
    icon: InfoIcon,
    titleKey: "featureTitle",
    descriptionKey: "featureDescription",
  },
] as const

const { dir, values: t } = translations.ar
---

<div class="grid w-full max-w-md items-start gap-4" dir={dir}>
  {alerts.map((alert) => {
    const Icon = alert.icon
    return (
      <Alert>
        <Icon />
        <AlertTitle>{t[alert.titleKey]}</AlertTitle>
        <AlertDescription>{t[alert.descriptionKey]}</AlertDescription>
      </Alert>
    )
  })}
</div>