import React from 'react';
import { categoryIcons } from '@/constants/categoryIcons';
import { formatCurrency } from '@/utils/formatters';

interface BudgetCategoriesSectionProps {
  categories: {
    title: string;
    current: number;
    total: number;
  }[];
}

const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
  categories
}) => {
  return <>
    <h2 className="text-base font-semibold mb-3 mt-8">지출 그래프</h2>
    <div className="neuro-card mb-8">
      {categories.map((category, index) => {
        // 예산 초과 여부 확인
        const isOverBudget = category.current > category.total && category.total > 0;
        // 실제 백분율 계산 (초과해도 실제 퍼센트로 표시)
        const actualPercentage = category.total > 0 
          ? Math.round((category.current / category.total) * 100) 
          : 0;
        // 프로그레스 바용 퍼센트 - 제한 없이 실제 퍼센트 표시
        const displayPercentage = actualPercentage;
        
        // 예산이 얼마 남지 않은 경우 (10% 미만)
        const isLowBudget = category.total > 0 && actualPercentage >= 90 && actualPercentage < 100;
        
        // 프로그레스 바 색상 결정
        const progressBarColor = isOverBudget 
          ? 'bg-red-500' 
          : isLowBudget 
            ? 'bg-yellow-400' 
            : 'bg-neuro-income';
        
        // 남은 예산 또는 초과 예산
        const budgetStatusText = isOverBudget 
          ? '예산 초과: ' 
          : '남은 예산: ';
        
        const budgetAmount = isOverBudget 
          ? Math.abs(category.total - category.current)
          : Math.max(0, category.total - category.current);
        
        return (
          <div key={index} className={`${index !== 0 ? 'mt-4 pt-4 border-t border-gray-100' : ''}`}>
            <div className="flex items-center gap-2 mb-1">
              <div className="text-neuro-income">
                {categoryIcons[category.title]}
              </div>
              <h3 className="text-sm font-medium text-gray-600">{category.title}</h3>
            </div>
            
            <div className="flex items-center justify-between mb-2">
              <p className="text-lg font-semibold">{formatCurrency(category.current)}</p>
              <p className="text-sm text-gray-500">/ {formatCurrency(category.total)}</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: `${Math.min(displayPercentage, 100)}%` }}
              />
            </div>
            
            <div className="mt-2 flex justify-between items-center">
              <span className={`text-xs font-medium ${isOverBudget ? 'text-red-500' : 'text-neuro-income'}`}>
                {budgetStatusText}{formatCurrency(budgetAmount)}
              </span>
              <span className="text-xs font-medium text-gray-500">
                {displayPercentage}%
              </span>
            </div>
          </div>
        );
      })}
    </div>
  </>;
};

export default BudgetCategoriesSection;