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;