/**
 * AccountSummary Component
 * Displays paper trading account balance and equity
 */

interface AccountSummaryProps {
  balance: number;
  equity: number;
  unrealizedPnl: number;
  currency?: string;
}

export default function AccountSummary({
  balance,
  equity,
  unrealizedPnl,
}: AccountSummaryProps) {
  const pnlPercent = balance > 0 ? ((unrealizedPnl / balance) * 100) : 0;
  const isProfitable = unrealizedPnl >= 0;

  return (
    <div className="border-b border-gray-700 p-4 bg-gray-900">
      <h3 className="text-sm font-semibold text-gray-400 mb-3">Paper Trading</h3>

      <div className="space-y-2 text-sm">
        {/* Balance */}
        <div className="flex justify-between items-center">
          <span className="text-gray-400">Balance:</span>
          <span className="text-white font-mono">
            ${balance.toLocaleString(undefined, {
              minimumFractionDigits: 2,
              maximumFractionDigits: 2,
            })}
          </span>
        </div>

        {/* Equity */}
        <div className="flex justify-between items-center">
          <span className="text-gray-400">Equity:</span>
          <span className="text-white font-mono">
            ${equity.toLocaleString(undefined, {
              minimumFractionDigits: 2,
              maximumFractionDigits: 2,
            })}
          </span>
        </div>

        {/* Unrealized P&L */}
        <div className="flex justify-between items-center">
          <span className="text-gray-400">P&L:</span>
          <span className={`font-mono font-medium ${isProfitable ? 'text-green-400' : 'text-red-400'}`}>
            {isProfitable ? '+' : ''}${unrealizedPnl.toLocaleString(undefined, {
              minimumFractionDigits: 2,
              maximumFractionDigits: 2,
            })}
            <span className="ml-1 text-xs">
              ({isProfitable ? '+' : ''}{pnlPercent.toFixed(2)}%)
            </span>
          </span>
        </div>
      </div>
    </div>
  );
}
