import { ArrowDown, ArrowUp } from "lucide-react";
import { cn } from "@/lib/utils";

interface BalanceCardProps {
  balance: number;
  income: number;
  expenses: number;
  currency?: string;
}

const BalanceCard = ({
  balance,
  income,
  expenses,
  currency = "$"
}: BalanceCardProps) => {
  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
      currencyDisplay: 'symbol',
      minimumFractionDigits: 2
    }).format(amount).replace('$', '');
  };

  return (
    <div className="relative w-full rounded-2xl overflow-hidden transition-all duration-300 hover:-translate-y-1 bg-white/80 backdrop-blur-lg border border-slate-200 shadow-lg">
      <div className="relative p-5 text-slate-800">
        <p className="text-slate-500 font-medium mb-1">Balance</p>
        <h2 className="text-3xl font-semibold tracking-tight flex items-baseline">
          <span className="text-lg mr-1">{currency}</span>
          <span>{formatCurrency(balance)}</span>
        </h2>

        <div className="flex justify-between mt-6">
          <div className="flex items-center space-x-2">
            <div className="p-1.5 rounded-full bg-green-100">
              <ArrowDown size={14} className="text-green-600" />
            </div>
            <div>
              <p className="text-xs text-slate-500">Income</p>
              <p className="font-medium text-slate-800">{currency}{formatCurrency(income)}</p>
            </div>
          </div>
          
          <div className="flex items-center space-x-2">
            <div className="p-1.5 rounded-full bg-red-100">
              <ArrowUp size={14} className="text-red-600" />
            </div>
            <div>
              <p className="text-xs text-slate-500">Expenses</p>
              <p className="font-medium text-slate-800">{currency}{formatCurrency(expenses)}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default BalanceCard;