import React, {useState} from 'react';

const dataBlock = [
    "Apple", "Orange", "Ambulance", "Pomegranate", "Banana", "Pumpkin", "Pie", "Sugar", "Lollipop"
]


const SearchBar() {
    const {searchTerm, setSearchTerm} = useState("");
    const {showData, setShowData} = useState(dataBlock);

    const handleInput = (e) => {
        const value = e.target.value;
        setSearchTerm(value);

        const filteredData = dataBlock.filter(item =>
        item.toLowerCase().includes(value.toLowerCase()));

        setShowData(filteredData);
    }

    return (
        <>
        <h1>Input: </h1>
        <input className={textfield} id={search} value={searchTerm} onChange={handleInput}  />

        {showData.map((dt, index) => <p key={index}>{dt}</p>)}
        </>
    )
}

export default SearchBar;