zellyy-finance/src/components/CategoryBudgetInputs.tsx

import React from 'react';
import { Input } from '@/components/ui/input';

interface CategoryBudget {
  식비: number;
  생활비: number;
  교통비: number;
}

interface CategoryBudgetInputsProps {
  categoryBudgets: CategoryBudget;
  handleCategoryInputChange: (value: string, category: keyof CategoryBudget) => void;
}

const CategoryBudgetInputs: React.FC<CategoryBudgetInputsProps> = ({
  categoryBudgets,
  handleCategoryInputChange
}) => {
  return (
    <div className="space-y-2">
      <div className="flex items-center justify-between">
        <label className="text-sm text-gray-600">식비</label>
        <Input 
          value={categoryBudgets.식비.toString()} 
          onChange={e => handleCategoryInputChange(e.target.value, '식비')} 
          className="neuro-pressed max-w-[150px]" 
        />
      </div>
      
      <div className="flex items-center justify-between">
        <label className="text-sm text-gray-600">생활비</label>
        <Input 
          value={categoryBudgets.생활비.toString()} 
          onChange={e => handleCategoryInputChange(e.target.value, '생활비')} 
          className="neuro-pressed max-w-[150px]" 
        />
      </div>
      
      <div className="flex items-center justify-between">
        <label className="text-sm text-gray-600">교통비</label>
        <Input 
          value={categoryBudgets.교통비.toString()} 
          onChange={e => handleCategoryInputChange(e.target.value, '교통비')} 
          className="neuro-pressed max-w-[150px]" 
        />
      </div>
    </div>
  );
};

export default CategoryBudgetInputs;