Action Dispatch and State Updates

import React from 'react';
import { useGameContext } from '../context/GameContext';
import './GameActions.css';

export default function GameActions() {
  const { state, dispatch } = useGameContext();

  const actions = [
    {
      name: 'Serve Coffee',
      icon: '☕',
      description: 'Quick black coffee for customers',
      cost: '1 bean, 5 energy',
      effect: '+$5, +3 satisfaction',
      enabled: state.resources.coffeeBeans >= 1 && state.resources.energy >= 5 && state.shop.queueLength >= 1,
      action: () => dispatch({ type: 'SERVE_COFFEE' }),
      class: 'primary-btn'
    },
    // Example placeholder actions to ensure the map renders at least two actions
    {
      name: 'Restock Beans',
      icon: '🫘',
      description: 'Restock your coffee beans supply',
      cost: '-$10',
      effect: '+10 beans',
      enabled: state.resources.money >= 10,
      action: () => dispatch({ type: 'RESTOCK_BEANS' }),
      class: 'secondary-btn'
    }
  ];

  return (
    <div className="game-actions">
      <h3 className="actions-title">☕ Available Actions</h3>
      <div className="actions-grid">
        {actions.map(action => (
          <div key={action.name} className="action-card">
            <div className="action-header">
              <span className="action-icon">{action.icon}</span>
              <h4>{action.name}</h4>
            </div>
            <p className="action-description">{action.description}</p>
            <button
              className={action.class}
              disabled={!action.enabled || state.timers.isPaused}
              onClick={action.action}
            >
              {action.enabled ? 'Perform' : 'Not Available'}
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

    case 'SERVE_COFFEE': {
      if (
        state.resources.coffeeBeans < 1 ||
        state.resources.energy < 5 ||
        state.shop.queueLength < 1
      ) {
        return state;
      }

      const earnings = 5;

      return {
        ...state,
        resources: {
          ...state.resources,
          coffeeBeans: state.resources.coffeeBeans - 1,
          energy: state.resources.energy - 5,
          money: state.resources.money + earnings,
          satisfaction: Math.min(100, state.resources.satisfaction + 3)
        },
        shop: {
          ...state.shop,
          queueLength: Math.max(0, state.shop.queueLength - 1),
          customersServed: state.shop.customersServed + 1,
          ordersCompleted: state.shop.ordersCompleted + 1,
          revenue: state.shop.revenue + earnings
        }
      };
    }
    case 'RESTOCK_BEANS': {
      if (state.resources.money < 10) {
        return state;
      }
      return {
        ...state,
        resources: {
          ...state.resources,
          money: state.resources.money - 10,
          coffeeBeans: state.resources.coffeeBeans + 10
        }
      };
    }