import './defaults.css'
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,
  page: number,
}

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

    </>
  )
}

export default App