Button

import { ArrowRight } from "lucide-react";

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

const copy = {
  en: { confirm: "Confirm transfer", cancel: "Cancel" },
  ar: { confirm: "تأكيد التحويل", cancel: "إلغاء" },
} as const;

export default function ButtonDemo({ locale }: ExampleProps) {
  return (
    <Bilingual locale={locale} copy={copy} className="flex flex-col gap-6">
      {(t) => (
        <div className="flex flex-wrap items-center gap-3">
          {/* Directional icons flip in RTL. */}
          <Button endIcon={<ArrowRight className="rtl:-scale-x-100" />}>{t.confirm}</Button>
          <Button variant="outline">{t.cancel}</Button>
        </div>
      )}
    </Bilingual>
  );
}