import './App.css'
import { MovieWall } from './objects/movie-wall'
import { useState, useEffect } from 'react'
import tmdb from './objects/tmdb'

export type Config = {
  language: string,
  region: string
}

function App() {
  const [config, setConfig] = useState<Config>({
    language: "es",
    region: "spain"
  })
  const [popularMovies, setPopularMovies] = useState([])
  useEffect(() => { tmdb.getPopular(config, setPopularMovies) }, [])
  useEffect(() => { console.log(popularMovies) }, [popularMovies])
  return (
    <>
      <header>
        <h1>Movie Explorer</h1>
      </header>
      <main>
        Let's explore!
        <MovieWall movies={popularMovies} />
      </main>

    </>
  )
}

export default App