
import React from 'react';
import { Check } from 'lucide-react';
import { Button } from '@/components/ui/button';
import CategoryBudgetInputs from '../CategoryBudgetInputs';

interface BudgetInputFormProps {
  showBudgetInput: boolean;
  categoryBudgets: Record<string, number>;
  handleCategoryInputChange: (value: string, category: string) => void;
  handleSaveCategoryBudgets: () => void;
  calculateTotalBudget: () => number;
  formatCurrency: (amount: number) => string;
}

const BudgetInputForm: React.FC<BudgetInputFormProps> = ({
  showBudgetInput,
  categoryBudgets,
  handleCategoryInputChange,
  handleSaveCategoryBudgets,
  calculateTotalBudget,
  formatCurrency
}) => {
  if (!showBudgetInput) return null;

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    e.stopPropagation();
    handleSaveCategoryBudgets();
  };

  return (
    <div className="mt-4">
      <div className="neuro-card p-4">
        <form onSubmit={handleSubmit}>
          <div>
            <h3 className="text-base font-medium mb-3">카테고리별 월간 예산 설정</h3>
            <p className="text-sm text-gray-500 mb-4">카테고리별로 월간 예산을 설정하세요. 일일, 주간 예산은 자동으로 계산됩니다.</p>
            <CategoryBudgetInputs 
              categoryBudgets={categoryBudgets} 
              handleCategoryInputChange={handleCategoryInputChange} 
            />

            <div className="mt-4 border-t border-gray-300 pt-3">
              <div className="flex justify-between items-center mb-4">
                <h3 className="font-medium text-sm px-[34px]">월간 총 예산:</h3>
                <p className="font-bold text-neuro-income text-base px-[10px]">{formatCurrency(calculateTotalBudget())}</p>
              </div>

              <div className="flex justify-end">
                <Button 
                  type="submit"
                  size="sm" 
                  className="bg-neuro-income hover:bg-neuro-income/90 text-white mx-[6px]"
                >
                  <Check size={18} className="mr-1" />
                  저장하기
                </Button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  );
};

export default BudgetInputForm;
