import { useEffect, useState } from "react";

// It uses the useState hook to manage the state of the filtered data,
// and an input field with an onKeyUp event listener to trigger the filtering function. 
// When the function is called, it filters the list of items based on 
// whether the item's name includes the search query, and updates the state of the filtered data. 
// The component then renders the list of items or a message indicating that no data was found,
// depending on whether there are any items in the filtered data array.

const App = () => {
  const myData = ["Apple", "Banana", "Orange", "Papaya", "Grapes"];
  const [filteredData, setFilteredData] = useState(myData);
  const [query, setQuery] = useState("");

  useEffect(() => {
    const filteredRecords = myData.filter((item) =>
      item.toLowerCase().includes(query.toLowerCase())
    );
    setFilteredData(filteredRecords);
  }, [query]);

  return (
    <div className="container">
      <div className="search_box">
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          className="searchCtrl"
          placeholder="Search the list"
        />
      </div>
      <div className="box">
        {filteredData && filteredData.length > 0 ? (
          <ul className="list">
            {filteredData.map((item, index) => (
              <li key={index}>{item}</li>
            ))}
          </ul>
        ) : (
          <div className="message">Not Data Found</div>
        )}
      </div>
    </div>
  );
}

export default App;