Account Card

import { ArrowDownLeft, ArrowUpRight, Landmark } from "lucide-react";
import { cn } from "@/lib/utils";

export interface AccountCardProps {
  bank?: string;
  name?: string;
  last4?: string;
  currency?: string;
  balance?: number;
  available?: number;
  synced?: string;
  recent?: { label: string; amount: number; date: string }[];
  className?: string;
}

/** Bank account card: institution + masked number header, big balance with available amount, sync timestamp, and three recent inflow/outflow rows. */
export function AccountCard({
  bank = "First Republic",
  name = "Operating account",
  last4 = "4821",
  currency = "USD",
  balance = 2_418_902.44,
  available = 2_306_120.1,
  synced = "Synced 4 min ago",
  recent = [
    { label: "Northwind Traders", amount: 18400, date: "Today" },
    { label: "AWS · Invoice 88213", amount: -12400, date: "Yesterday" },
    { label: "Lumen Health", amount: 6250, date: "Sep 22" },
  ],
  className,
}: AccountCardProps) {
  const fmt = (n: number) => n.toLocaleString("en-US", { style: "currency", currency });
  return (
    <article className={cn("da-stroke w-full max-w-sm rounded-da-lg bg-da-surface text-da-surface-fg shadow-da-sm", className)}>
      <header className="flex items-center gap-3 border-b border-da-border p-5">
        <span aria-hidden className="grid size-10 place-items-center rounded-da-md bg-da-accent text-da-accent-fg">
          <Landmark className="size-5" />
        </span>
        <div className="min-w-0 flex-1">
          <h3 className="truncate font-semibold">{name}</h3>
          <p className="text-sm text-da-muted-fg">
            {bank} · <span className="font-da-mono">••{last4}</span>
          </p>
        </div>
        <span className="rounded-da-sm bg-da-muted px-1.5 py-0.5 font-da-mono text-xs">{currency}</span>
      </header>
      <div className="p-5">
        <p className="text-sm text-da-muted-fg">Current balance</p>
        <p className="mt-1 font-da-mono text-3xl font-medium tracking-tight tabular-nums">{fmt(balance)}</p>
        <p className="mt-1 text-sm text-da-muted-fg">
          Available <span className="font-da-mono text-da-fg">{fmt(available)}</span>
        </p>
        <p className="mt-3 flex items-center gap-1.5 text-xs text-da-muted-fg">
          <span aria-hidden className="size-1.5 rounded-full bg-da-success" />
          {synced}
        </p>
      </div>
      <ul className="divide-y divide-da-border border-t border-da-border" aria-label="Recent transactions">
        {recent.map((r) => (
          <li key={r.label} className="flex items-center gap-3 px-5 py-3 text-sm">
            <span
              aria-hidden
              className={cn("grid size-7 place-items-center rounded-full", r.amount >= 0 ? "bg-da-success/12 text-da-success" : "bg-da-muted text-da-muted-fg")}
            >
              {r.amount >= 0 ? <ArrowDownLeft className="size-3.5" /> : <ArrowUpRight className="size-3.5" />}
            </span>
            <span className="min-w-0 flex-1">
              <span className="block truncate font-medium">{r.label}</span>
              <span className="block text-xs text-da-muted-fg">{r.date}</span>
            </span>
            <span className={cn("font-da-mono tabular-nums", r.amount >= 0 && "text-da-success")}>
              {r.amount >= 0 ? "+" : "−"}
              {fmt(Math.abs(r.amount))}
            </span>
          </li>
        ))}
      </ul>
    </article>
  );
}

export default AccountCard;