import React, { useReducer, useState } from 'react';

// 1. Reducer 함수 (상태 변화 로직을 컴포넌트 외부로 완벽히 분리!)
function accountReducer(state, action) {
  switch (action.type) {
    case 'DEPOSIT':
      return { balance: state.balance + action.payload };
    case 'WITHDRAW':
      if (state.balance < action.payload) return state; // 잔액 부족 처리
      return { balance: state.balance - action.payload };
    default:
      return state;
  }
}

export default function BankApp() {
  // 2. useReducer 초기화: [현재상태, 디스패치함수] 반환
  const [state, dispatch] = useReducer(accountReducer, { balance: 0 });
  const [amount, setAmount] = useState(10000);

  return (
    <div className="app-container">
      <h3>은행 계좌 시스템 (React)</h3>
      <div className="balance">
        잔액: <span>{state.balance.toLocaleString()}</span>원
      </div>
      
      <input 
        type="number" 
        value={amount} 
        onChange={(e) => setAmount(Number(e.target.value))}
      />
      
      <div className="buttons">
        <button onClick={() => dispatch({ type: 'DEPOSIT', payload: amount })}>
          입금하기
        </button>
        <button onClick={() => dispatch({ type: 'WITHDRAW', payload: amount })}>
          출금하기
        </button>
      </div>
    </div>
  );
}