Badge

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

const copy = {
  en: { completed: "Completed", pending: "Pending", failed: "Failed", verified: "Verified", count: "3" },
  ar: { completed: "مكتملة", pending: "معلّقة", failed: "فشلت", verified: "موثّقة", count: "3" },
} as const;

export default function BadgeDemo({ locale }: ExampleProps) {
  return (
    <Bilingual locale={locale} copy={copy} className="flex flex-col gap-4">
      {(t) => (
        <div className="flex flex-wrap items-center gap-2">
          <Badge variant="positive" dot>
            {t.completed}
          </Badge>
          <Badge variant="warning" dot>
            {t.pending}
          </Badge>
          <Badge variant="negative" dot>
            {t.failed}
          </Badge>
          <Badge variant="primary">{t.verified}</Badge>
          <Badge variant="primary" appearance="solid" size="sm">
            {t.count}
          </Badge>
        </div>
      )}
    </Bilingual>
  );
}