import React from 'react';

interface BudgetProgressProps {
  spentAmount: number;
  targetAmount: number;
  percentage: number;
  formatCurrency: (amount: number) => string;
}

const BudgetProgress: React.FC<BudgetProgressProps> = ({
  spentAmount,
  targetAmount,
  percentage,
  formatCurrency
}) => {
  // NaN 값을 방지하기 위해 percentage가 숫자가 아닌 경우 0으로 표시
  const displayPercentage = isNaN(percentage) ? 0 : percentage;
  
  return (
    <div>
      <div className="flex items-center justify-between mb-2">
        <p className="text-lg font-semibold">{formatCurrency(spentAmount)}</p>
        <p className="text-sm text-gray-500">/ {formatCurrency(targetAmount)}</p>
      </div>
      
      <div className="relative h-3 neuro-pressed overflow-hidden mt-2">
        <div 
          style={{ width: `${displayPercentage}%` }} 
          className={`absolute top-0 left-0 h-full transition-all duration-700 ease-out ${displayPercentage >= 90 ? "bg-yellow-400" : "bg-neuro-income"}`} 
        />
      </div>
      
      <div className="mt-2 flex justify-end">
        <span className="text-xs font-medium text-gray-500">
          {displayPercentage}%
        </span>
      </div>
    </div>
  );
};

export default BudgetProgress;