import React from 'react';
import { cn } from '@/lib/utils';
import { Coffee, Home, Car } from 'lucide-react';

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

// Category icons mapping
const categoryIcons: Record<string, React.ReactNode> = {
  식비: <Coffee size={18} />,
  생활비: <Home size={18} />,
  교통비: <Car size={18} />,
};

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">
      <div className="flex items-center gap-2 mb-1">
        <div className="text-neuro-income">
          {categoryIcons[title]}
        </div>
        <h3 className="text-sm font-medium text-gray-600">{title}</h3>
      </div>
      
      <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="text-xs font-medium text-gray-500">
          {percentage}%
        </span>
      </div>
    </div>
  );
};

export default BudgetCard;