import Link from "next/link";
import type { BankAccount } from "@/payload-types";
import { Item, ItemContent, ItemHeader, ItemTitle } from "@/components/ui/item";
import { WalletIcon } from "lucide-react";
import { formatAmount, type CurrencyConfig } from "@/lib/banking/format";
import { MyWalletCard } from "@/components/frontend/banking/MyWalletCard";

interface WalletWidgetProps {
  readonly account: BankAccount | null;
  readonly currencyConfig: CurrencyConfig;
}

export function WalletWidget({ account, currencyConfig }: WalletWidgetProps) {
  if (!account) {
    return <MyWalletCard />;
  }

  return (
    <Item variant="outline">
      <ItemHeader>
        <div className="flex items-center gap-2">
          <WalletIcon className="size-4 text-muted-foreground" />
          <ItemTitle>Wallet</ItemTitle>
        </div>
        <Link
          href="/logistics/banking"
          className="text-xs text-muted-foreground transition-colors hover:text-primary"
        >
          Banking
        </Link>
      </ItemHeader>
      <ItemContent>
        <Link
          href={`/logistics/banking/${account.id}`}
          className="group flex items-center justify-between gap-3"
        >
          <div className="flex min-w-0 flex-col gap-0.5">
            <span className="truncate text-sm font-medium transition-colors group-hover:text-primary">
              {account.name}
            </span>
            <span className="text-xs text-muted-foreground">
              Personal account
              {account.status && account.status !== "open" ? ` · ${account.status}` : ""}
            </span>
          </div>
          <span className="shrink-0 font-mono text-xl font-semibold tabular-nums">
            {formatAmount(account.balance ?? 0, currencyConfig)}
          </span>
        </Link>
      </ItemContent>
    </Item>
  );
}