client/src/features/dashboard/components/NetWorthWidget.tsx

import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../../../components/ui/card"
import { Wallet as WalletIcon, TrendingUp, HandCoins, Building2 } from 'lucide-react'

interface Props {
  totalNetWorth: number;
  cashAssetsTotal: number;
  loansOwedToYouTotal: number;
  debtsYouOweTotal: number;
  mainCurrency: string;
}

export function NetWorthWidget({ totalNetWorth, cashAssetsTotal, loansOwedToYouTotal, debtsYouOweTotal, mainCurrency }: Props) {
    return (
        <Card className="mb-6 md:mb-8 group relative border-blue-500/20 shrink-0">
            <div className="absolute top-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity hidden sm:block">
                <Building2 className="w-32 h-32 text-blue-500" />
            </div>
            <CardHeader className="pb-2">
                <CardDescription className="text-sm md:text-base text-neutral-400 font-medium mb-1 md:mb-2 text-left">Total Net Worth</CardDescription>
                <CardTitle className="text-3xl md:text-5xl font-bold tracking-tight text-white mb-4 md:mb-6 text-left">
                    {totalNetWorth.toLocaleString(undefined, { maximumFractionDigits: 2 })} <span className="text-xl md:text-2xl text-blue-400">{mainCurrency}</span>
                </CardTitle>
            </CardHeader>

            <CardContent>
                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 md:gap-6 pt-4 md:pt-6 border-t border-white/10 relative z-10 text-left">
                    <div>
                        <div className="flex items-center gap-2 text-emerald-400 mb-1">
                            <WalletIcon className="w-4 h-4" />
                            <span className="text-xs md:text-sm font-medium">Cash Assets</span>
                        </div>
                        <p className="text-lg md:text-2xl font-semibold">{cashAssetsTotal.toLocaleString(undefined, { maximumFractionDigits: 0 })} {mainCurrency}</p>
                    </div>
                    <div>
                        <div className="flex items-center gap-2 text-indigo-400 mb-1">
                            <HandCoins className="w-4 h-4" />
                            <span className="text-xs md:text-sm font-medium">Owed to You</span>
                        </div>
                        <p className="text-lg md:text-2xl font-semibold">{loansOwedToYouTotal.toLocaleString(undefined, { maximumFractionDigits: 0 })} {mainCurrency}</p>
                    </div>
                    <div>
                        <div className="flex items-center gap-2 text-rose-400 mb-1">
                            <TrendingUp className="w-4 h-4 rotate-180" />
                            <span className="text-xs md:text-sm font-medium">Your Debts</span>
                        </div>
                        <p className="text-lg md:text-2xl font-semibold">{debtsYouOweTotal.toLocaleString(undefined, { maximumFractionDigits: 0 })} {mainCurrency}</p>
                    </div>
                </div>
            </CardContent>
        </Card>
    );
}