import React from 'react';
import BudgetCard from '@/components/BudgetCard';

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="grid gap-4 mb-8">
        {categories.map((category, index) => (
          <BudgetCard 
            key={index}
            title={category.title} 
            current={category.current} 
            total={category.total} 
            color="neuro-income" 
          />
        ))}
      </div>
    </>
  );
};

export default BudgetCategoriesSection;