import React from 'react';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { selectGame } from './action';

const Home = () => {
  const games = ['Cricket', 'Football', 'Tennis'];
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const handleBookNow = (game) => {
    dispatch(selectGame(game));
    navigate('/book');
  };

  return (
    <div>
      <h1>Available Games</h1>
      {games.map((game) => (
        <div key={game} style={{ margin: '10px', border: '1px solid black', padding: '10px' }}>
          <h2>{game}</h2>
          <button onClick={() => handleBookNow(game)}>Book Now</button>
        </div>
      ))}
      <button onClick={() => navigate('/search')}>Check your booking</button>
    </div>
  );
};

export default Home;