import React from 'react';
import { cn } from '@/lib/utils';

interface BudgetCardProps {
  title: string;
  current: number;
  total: number;
  color?: string;
}

const BudgetCard: React.FC<BudgetCardProps> = ({ 
  title, 
  current, 
  total,
  color = 'neuro-income'
}) => {
  const percentage = Math.min(Math.round((current / total) * 100), 100);
  
  const formattedCurrent = new Intl.NumberFormat('ko-KR', {
    style: 'currency',
    currency: 'KRW',
    maximumFractionDigits: 0
  }).format(current);
  
  const formattedTotal = new Intl.NumberFormat('ko-KR', {
    style: 'currency',
    currency: 'KRW',
    maximumFractionDigits: 0
  }).format(total);
  
  // Determine progress bar color based on percentage
  const progressBarColor = percentage >= 90 ? 'bg-yellow-400' : `bg-${color}`;
  
  return (
    <div className="neuro-card">
      <h3 className="text-sm font-medium text-gray-600 mb-1">{title}</h3>
      
      <div className="flex items-center justify-between mb-2">
        <p className="text-lg font-semibold">{formattedCurrent}</p>
        <p className="text-sm text-gray-500">/ {formattedTotal}</p>
      </div>
      
      <div className="relative h-3 neuro-pressed overflow-hidden">
        <div 
          className={`absolute top-0 left-0 h-full transition-all duration-700 ease-out ${progressBarColor}`}
          style={{ width: `${percentage}%` }}
        />
      </div>
      
      <div className="mt-2 flex justify-end">
        <span className={cn(
          "text-xs font-medium",
          percentage >= 90 ? "text-neuro-expense" : "text-gray-500"
        )}>
          {percentage}%
        </span>
      </div>
    </div>
  );
};

export default BudgetCard;