'use client';

import { formatCurrency } from '@/lib/utils';
import Link from 'next/link';
import type { Wallet } from '@/types';

interface WalletCardProps {
  wallet: Wallet;
  appName?: string;
}

export function WalletCard({ wallet, appName = 'Gaming Tournament' }: WalletCardProps) {
  const depositBalance = parseFloat(wallet.depositBalance.toString());
  const winningBalance = parseFloat(wallet.winningBalance.toString());
  const lockedBalance = parseFloat(wallet.withdrawLockedBalance.toString());
  const totalBalance = depositBalance + winningBalance;

  return (
    <div className="space-y-4">
      {/* Main Balance Card */}
      <div className="card-featured">
        <div className="flex justify-between items-start mb-4">
          <div>
            <p className="text-slate-400 text-sm mb-2">মোট ব্যালেন্স</p>
            <h2 className="text-4xl font-bold gradient-text">
              {formatCurrency(totalBalance)}
            </h2>
          </div>
          <div className="w-12 h-12 bg-gradient-to-br from-orange-500/20 to-yellow-500/20 rounded-lg flex items-center justify-center border border-orange-500/30">
            <span className="text-2xl">💰</span>
          </div>
        </div>

        <div className="grid grid-cols-3 gap-3 pt-4 border-t border-orange-500/20">
          <div className="text-center">
            <p className="text-slate-400 text-xs mb-2">ডিপোজিট</p>
            <p className="font-bold text-orange-500">{formatCurrency(depositBalance)}</p>
          </div>
          <div className="text-center">
            <p className="text-slate-400 text-xs mb-2">জয়ের টাকা</p>
            <p className="font-bold text-yellow-400">{formatCurrency(winningBalance)}</p>
          </div>
          <div className="text-center">
            <p className="text-slate-400 text-xs mb-2">লক্ড</p>
            <p className="font-bold text-red-400">{formatCurrency(lockedBalance)}</p>
          </div>
        </div>
      </div>

      {/* Action Buttons */}
      <div className="grid grid-cols-2 gap-3">
        <Link href="/dashboard/deposit" className="btn btn-primary text-center">
          <span>💳</span> ডিপোজিট
        </Link>
        <Link href="/dashboard/withdraw" className="btn btn-secondary text-center">
          <span>💸</span> উইথড্রও
        </Link>
      </div>

      {/* Info Alert */}
      <div className="bg-blue-500/10 border border-blue-500/30 rounded-lg p-3 text-xs text-blue-300">
        <p className="font-semibold mb-1">💡 টিপ</p>
        <p>আপনার ডিপোজিট ব্যালেন্স ম্যাচে যোগদান করতে ব্যবহৃত হয়। জয়ের টাকা শুধুমাত্র উইথড্রও করা যায়।</p>
      </div>
    </div>
  );
}