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

interface BudgetInputButtonProps {
  isBudgetSet: boolean;
  budgetButtonText: string;
  toggleBudgetInput: () => void;
}

const BudgetInputButton: React.FC<BudgetInputButtonProps> = ({
  isBudgetSet,
  budgetButtonText,
  toggleBudgetInput
}) => {
  const handleButtonClick = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    console.log('예산 수정 버튼 클릭됨');
    toggleBudgetInput();
  };

  if (isBudgetSet) {
    return (
      <div className="mt-6">
        <button
          onClick={handleButtonClick}
          className="text-neuro-income hover:underline flex items-center text-base font-semibold group"
          type="button"
        >
          <CirclePlus size={26} className="mr-2 text-neuro-income transition-transform group-hover:scale-110" />
          <span className="text-base font-semibold">{budgetButtonText}</span>
        </button>
      </div>
    );
  }

  return (
    <div className="py-4 text-center">
      <div className="text-gray-400 mb-4">아직 예산이 설정되지 않았습니다</div>
      <Button 
        onClick={handleButtonClick} 
        variant="default" 
        className="bg-neuro-income hover:bg-neuro-income/90 animate-pulse shadow-lg"
        type="button"
      >
        <CirclePlus className="mr-2" size={24} />
        <span className="animate-pulse">{budgetButtonText}</span>
      </Button>
    </div>
  );
};

export default BudgetInputButton;
