Alert

import { ArrowRight } from "lucide-react";

import { Alert, AlertDescription, AlertTitle, Button } from "@thanawi/ui";
import { Bilingual, type ExampleProps } from "./_bilingual";

const copy = {
  en: {
    title: "Limit almost reached",
    body: "You've used 92% of this month's transfer limit.",
    action: "Increase limit",
    secondary: "Learn more",
    dismiss: "Dismiss",
  },
  ar: {
    title: "اقتربت من الحد",
    body: "استخدمت 92% من حد التحويل لهذا الشهر.",
    action: "رفع الحد",
    secondary: "اعرف المزيد",
    dismiss: "إغلاق",
  },
} as const;

export default function AlertDemo({ locale }: ExampleProps) {
  return (
    <Bilingual locale={locale} copy={copy} className="grid gap-8 lg:grid-cols-2">
      {(t) => (
        <Alert
          variant="warning"
          dismissible
          dismissLabel={t.dismiss}
          action={
            <>
              <Button size="sm" variant="secondary" endIcon={<ArrowRight className="rtl:-scale-x-100" />}>
                {t.action}
              </Button>
              <Button size="sm" variant="ghost">
                {t.secondary}
              </Button>
            </>
          }
        >
          <AlertTitle>{t.title}</AlertTitle>
          <AlertDescription>{t.body}</AlertDescription>
        </Alert>
      )}
    </Bilingual>
  );
}