Wallet home

// Mobile-first page; the same markup maps to React Native via NativeWind (View/FlatList/Pressable).
import { ArrowDownLeft, ArrowUpRight, Bell, ChartColumn, CreditCard, Eye, Home, Plus, ScanLine, ShoppingCart, User, Zap } from "lucide-react";
import { cn } from "@/lib/utils";

const balance = { whole: "₹1,24,580", paise: ".40", account: "Savings •• 4821", month: "+₹8,240 this month" };
const actions = [
  { label: "Send", icon: ArrowUpRight },
  { label: "Request", icon: ArrowDownLeft },
  { label: "Scan QR", icon: ScanLine },
  { label: "Top up", icon: Plus },
];
const transactions = [
  { id: "t1", name: "Green Basket Grocers", meta: "Today, 6:42 pm · UPI", amount: -1240, icon: ShoppingCart, tone: "bg-warning-soft text-warning-fg" },
  { id: "t2", name: "Salary · Lumen Labs", meta: "1 Oct · Bank transfer", amount: 82000, icon: ArrowDownLeft, tone: "bg-success-soft text-success-fg" },
  { id: "t3", name: "Electricity bill", meta: "30 Sep · Auto-pay", amount: -2186, icon: Zap, tone: "bg-info-soft text-info-fg" },
  { id: "t4", name: "Ananya Bose", meta: "29 Sep · Dinner split", amount: 650, initials: "AB", tone: "bg-primary-soft text-primary-soft-fg" },
];
const tabs = [
  { label: "Home", icon: Home, current: true },
  { label: "Cards", icon: CreditCard },
  { label: "Pay", icon: ScanLine },
  { label: "Insights", icon: ChartColumn },
  { label: "Profile", icon: User },
];

const inr = (n: number) =>
  (n < 0 ? "−" : "+") + "₹" + Math.abs(n).toLocaleString("en-IN");

export default function WalletScreen() {
  return (
    <div className="mx-auto flex min-h-dvh max-w-md flex-col bg-bg font-sans text-fg">
      <main className="flex-1 px-4 pb-4">
        <header className="flex h-14 items-center gap-2.5">
          <span className="grid size-9 place-items-center rounded-full bg-primary-soft text-[13px] font-medium text-primary-soft-fg">RD</span>
          <div className="min-w-0 flex-1 leading-tight">
            <p className="text-xs text-fg-muted">Good evening</p>
            <p className="text-[15px] font-semibold">Rohan Das</p>
          </div>
          <button type="button" aria-label="Notifications, 2 new" className="relative -mr-2.5 grid size-11 place-items-center rounded-full hover:bg-surface-2">
            <Bell className="size-[22px]" />
            <span className="absolute right-3 top-[11px] size-2 rounded-full bg-danger ring-2 ring-bg" />
          </button>
        </header>

        {/* Balance card on the brand colour; primary-fg keeps its text readable in light and dark */}
        <section aria-label="Balance" className="mt-2 rounded-xl bg-primary p-4 text-primary-fg">
          <div className="flex items-center justify-between text-[12.5px]">
            Total balance
            <button type="button" aria-label="Hide balance" className="-m-2 grid size-8 place-items-center rounded-full"><Eye className="size-4" /></button>
          </div>
          <p className="mt-1 text-[30px] font-semibold leading-9 tracking-tight tabular-nums">
            {balance.whole}<span className="text-lg font-medium">{balance.paise}</span>
          </p>
          <div className="mt-4 flex items-center justify-between text-xs">
            <span>{balance.account}</span>
            <span className="rounded-full bg-bg px-2 py-1 font-medium tabular-nums text-fg">{balance.month}</span>
          </div>
        </section>

        <div className="mt-5 grid grid-cols-4 gap-2">
          {actions.map(({ label, icon: Icon }) => (
            <button key={label} type="button" className="grid justify-items-center gap-1.5 text-xs font-medium">
              <span className="grid size-12 place-items-center rounded-full bg-primary-soft text-primary-soft-fg"><Icon className="size-5" /></span>
              {label}
            </button>
          ))}
        </div>

        <div className="mt-5 flex items-baseline justify-between">
          <h2 className="text-base font-semibold">Recent activity</h2>
          <a href="/activity" className="text-[13px] font-medium text-primary">See all</a>
        </div>
        <ul className="mt-1 divide-y divide-border">
          {transactions.map((t) => (
            <li key={t.id} className="flex min-h-[60px] items-center gap-3">
              <span className={cn("grid size-10 shrink-0 place-items-center rounded-full text-[13px] font-semibold", t.tone)}>
                {t.icon ? <t.icon className="size-[18px]" aria-hidden /> : t.initials}
              </span>
              <div className="min-w-0 flex-1">
                <p className="truncate font-medium">{t.name}</p>
                <p className="text-xs text-fg-muted">{t.meta}</p>
              </div>
              <span className={cn("font-semibold tabular-nums", t.amount > 0 && "text-success-fg")}>{inr(t.amount)}</span>
            </li>
          ))}
        </ul>
      </main>

      <nav aria-label="Main" className="sticky bottom-0 grid grid-cols-5 border-t border-border bg-bg px-1.5 pb-[max(env(safe-area-inset-bottom),8px)] pt-1">
        {tabs.map(({ label, icon: Icon, current }) => (
          <a key={label} href="#" aria-current={current ? "page" : undefined}
            className={cn("flex min-h-11 flex-col items-center justify-center gap-0.5 text-[10.5px] font-medium", current ? "text-primary" : "text-fg-subtle")}>
            <Icon className="size-[22px]" aria-hidden />{label}
          </a>
        ))}
      </nav>
    </div>
  );
}