// BankSaldo.tsx
import { Wallet } from "lucide-react";

interface AccountCardProps {
    title: string;
    balance: string;
    creditLimit: string;
    monthlyLimit: string;
}

export const BankSaldo = ({
    title,
    balance,
    creditLimit,
    monthlyLimit,
}: AccountCardProps) => {
    return (
        <div className="w-full max-w-xs bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
            <div className="h-1 bg-red-500" />
            <div className="p-4 space-y-4">
                <div className="flex justify-between items-center">
                    <h2 className="text-lg font-semibold">{title}</h2>
                    <Wallet className="h-5 w-5 text-gray-500" />
                </div>
                <div className="text-2xl font-bold text-gray-800">
                    {new Intl.NumberFormat("en-US", {
                        style: "currency",
                        currency: "USD",
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2,
                    }).format(parseFloat(balance))}
                </div>
                <div className="text-sm text-gray-600">
                    <div className="flex justify-between">
                        <span>Credit Limit:</span>
                        <span>{creditLimit}</span>
                    </div>
                    <div className="flex justify-between">
                        <span>Monthly Limit:</span>
                        <span>{monthlyLimit}</span>
                    </div>
                </div>
            </div>
        </div>
    );
};

interface AccountCardsProps {
    accounts: AccountCardProps[];
}

export const AccountCards = ({ accounts }: AccountCardsProps) => {
    return (
        <div className="flex flex-wrap gap-4 justify-center">
            {accounts.map((account, index) => (
                <BankSaldo key={index} {...account} />
            ))}
        </div>
    );
};

export default BankSaldo
