import { useState } from 'react'
import './App.css'

function App() {


  return (
    <>
      <ProductsTable></ProductsTable>
      <SimpleSearch></SimpleSearch>
    </>
  )
}

const produts:string[] = ['mouse', 'pad']

interface Product {
  name: string, 
  price: number
}


const productsss:Product[]=[
  {name:'mobile', price: 2000},
  {name:'laptop', price:30000}
]

function ProductsTable(){
  return (
    <div>
      {
        productsss.map(product=> <ProductTableRows name={product.name} price={product.price}></ProductTableRows> )
      }
    </div>
  )
}


function ProductTableRows({name, price}:{name:string, price:number}){
  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{name}</td>
            <td>{price}</td>
          </tr>
        </tbody>
      </table>
    </div>
  )
}

function SimpleSearch(){

  const [searchedMatched, setSearchedMatch] = useState<string[]>([])

  function handleSearch(searchedItem:string):void{
    let newMatched = productsss.find(p=>{
      if (p.name===searchedItem) {
        return p.name
      }
    })
    let reNewMatched = [...searchedMatched, newMatched]
    setSearchedMatch(reNewMatched)
    // if (produts.includes(searchedItem)){
    //   let newMatched = [...searchedMatched,searchedItem]
    //   setSearchedMatch(newMatched)
    // }
  }
  return (
    <div>
      <input type="text" onChange={(e)=>handleSearch(e.target.value)}/>
      {
        searchedMatched.map(product=> <li>{product}</li>)
      }
    </div>
  )
}

export default App