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-lg font-semibold mb-3 mt-8">지출 그래프</h2>
    <div className="neuro-card mb-8">
      {categories.map((category, index) => (
        <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 bg-neuro-income`}
              style={{ width: `${Math.min(Math.round((category.current / category.total) * 100), 100)}%` }}
            />
          </div>
          
          <div className="mt-2 flex justify-end">
            <span className="text-xs font-medium text-gray-500">
              {Math.min(Math.round((category.current / category.total) * 100), 100)}%
            </span>
          </div>
        </div>
      ))}
    </div>
  </>;
};

export default BudgetCategoriesSection;