Card

import { ArrowRight, FileText, TrendingUp } from "lucide-react";

import {
  Badge,
  Button,
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@thanawi/ui";
import { Bilingual, type ExampleProps } from "./_bilingual";

const copy = {
  en: {
    title: "Available balance",
    account: "Current account",
    status: "Active",
    amount: "248,500.00",
    currency: "SAR",
    change: "this month",
    rows: [
      { label: "Pending", value: "12,000.00" },
      { label: "On hold", value: "3,250.00" },
    ],
    transfer: "Transfer",
    statement: "Statement",
  },
  ar: {
    title: "الرصيد المتاح",
    account: "الحساب الجاري",
    status: "نشط",
    amount: "248,500.00",
    currency: "ر.س",
    change: "هذا الشهر",
    rows: [
      { label: "قيد المعالجة", value: "12,000.00" },
      { label: "محجوز", value: "3,250.00" },
    ],
    transfer: "تحويل",
    statement: "كشف الحساب",
  },
} as const;

export default function CardDemo({ locale }: ExampleProps) {
  return (
    <Bilingual locale={locale} copy={copy} className="grid gap-6 md:grid-cols-2">
      {(t) => (
        <Card variant="elevated">
          <CardHeader>
            <CardTitle className="text-sm font-medium text-content-muted">{t.title}</CardTitle>
            <CardDescription className="text-xs">
              {/* Isolate LTR runs (masked numbers, signed figures) so RTL text can't reorder them. */}
              {t.account} · <span dir="ltr">•••• 7519</span>
            </CardDescription>
            <CardAction>
              <Badge variant="positive" dot>
                {t.status}
              </Badge>
            </CardAction>
          </CardHeader>
          <CardContent className="flex flex-col gap-4">
            <div>
              <p className="flex items-baseline gap-2">
                <span className="text-4xl leading-tight font-light text-content-default tabular-nums">
                  {t.amount}
                </span>
                <span className="text-sm font-medium text-content-muted">{t.currency}</span>
              </p>
              <p className="mt-1 inline-flex items-center gap-1 text-xs font-medium text-content-positive tabular-nums">
                <TrendingUp className="size-3.5 rtl:-scale-x-100" />
                <span dir="ltr">+2.4%</span> {t.change}
              </p>
            </div>
            <dl className="grid grid-cols-2 gap-3 rounded-lg bg-surface-sunken p-3">
              {t.rows.map((row) => (
                <div key={row.label}>
                  <dt className="text-xs text-content-muted">{row.label}</dt>
                  <dd className="text-sm font-semibold text-content-default tabular-nums">
                    {row.value} <span className="text-xs font-medium text-content-muted">{t.currency}</span>
                  </dd>
                </div>
              ))}
            </dl>
          </CardContent>
          <CardFooter>
            <Button className="flex-1" endIcon={<ArrowRight className="rtl:-scale-x-100" />}>
              {t.transfer}
            </Button>
            <Button className="flex-1" variant="outline" startIcon={<FileText />}>
              {t.statement}
            </Button>
          </CardFooter>
        </Card>
      )}
    </Bilingual>
  );
}