import { useState } from 'react'
import styles from '../styles/Radio.module.scss'
import fetchJson from 'helpers/fetchJson'

const searchQuery = async (query, setResults) => {
  const results = await fetchJson('/api/radio/stations', {
    method: 'POST',
    body: JSON.stringify({ query })
  })

  setResults(results)
}

const Search = ({ setResults }) => {
  const [query, setQuery] = useState('')
  const changeQuery = e => setQuery(e.target.value)

  return (
    <div className={styles.search}>
      <input type="text" onChange={changeQuery} value={query} />
      <span
        className="window__button"
        onClick={() => searchQuery(query, setResults)}
      >
        Search
      </span>
    </div>
  )
}

export default Search