text: import React from "react";
  // Config
  import { POSTER_SIZE, BACKDROP_SIZE, IMAGE_BASE_URL } from "../config";
  // Components
  import HeroImage from "./HeroImage/index";
  import Grid from "./Grid/index";
  import Thumb from "./Thumb/index";
  import Spinner from "./Spinner/index";
  import SearchBar from "./SearchBar/index";
  import Button from "./Button/index";
  // Hook
  import { useHomeFetch } from "../hooks/useHomeFetch";
  // Image
  import NoImage from "../images/no_image.jpg";
  
  const Home = () => {
    const { state, loading, error, searchTerm, setSearchTerm, setIsLoadingMore } =
      useHomeFetch();
  
    if (error) {
      return <div>OPS! Ocorreu um Erro!</div>;
    }
  
    return (
      <>
        {state.results[0] ? (
          <HeroImage
            image={`${IMAGE_BASE_URL}${BACKDROP_SIZE}${state.results[0].backdrop_path}`}
            title={state.results[0].original_title}
            text={state.results[0].overview}
          />
        ) : null}
        <SearchBar setSearchTerm={setSearchTerm} />
        <Grid header={searchTerm ? "Resultado da Pesquisa" : "Filmes em Alta"}>
          {state.results.map((movie) => (
            <Thumb
              key={movie.id}
              clickable
              image={
                movie.poster_path
                  ? IMAGE_BASE_URL + POSTER_SIZE + movie.poster_path
                  : NoImage
              }
              movieId={movie.id}
            />
          ))}
        </Grid>
        {loading && <Spinner />}
        {state.page < state.total_pages && !loading && (
          <Button text="Carregar Mais" callback={() => setIsLoadingMore(true)} />
        )}
      </>
    );
  };
  
  export default Home;
  