import React, { useState } from 'react'; import { useSelector } from 'react-redux'; import { useNavigate } from 'react-router-dom'; const Search = () => { const { bookingCheck } = useSelector((state) => state); const [searchId, setSearchId] = useState(''); const [foundBooking, setFoundBooking] = useState(null); const navigate = useNavigate(); const handleSearch = () => { const match = bookingCheck.find(b => b.id.toString() === searchId.trim()); setFoundBooking(match || 'not_found'); }; return ( <div> <h2>Search Booking</h2> <input type="text" placeholder="Enter Booking ID" value={searchId} onChange={(e) => setSearchId(e.target.value)} /> <button onClick={handleSearch}>Search</button> <button onClick={() => navigate('/')}>Back</button> {bookingCheck.length === 0 && <p>No Booking happened yet</p>} {foundBooking === 'not_found' && <p>No Booking Found</p>} {foundBooking && foundBooking !== 'not_found' && ( <div style={{ marginTop: '10px' }}> <p>ID: {foundBooking.id}</p> <p>Name: {foundBooking.name}</p> <p>Contact: {foundBooking.contact}</p> <p>Game: {foundBooking.game}</p> <p>Slot: {foundBooking.slot}</p> <p>Date: {foundBooking.date}</p> </div> )} </div> ); }; export default Search;