import React, { useState, useEffect } from "react";
import "./Movie.css";

function Movie({ filters }) {
  const [movieList, setMovieList] = useState([]);
  const [page, setPage] = useState(1); 

  
  const getMovie = (pageNumber, filters) => {
    const { genre, year, rating } = filters;
    let url = `https://api.themoviedb.org/3/discover/movie?api_key=59690efd14e375225c4531fcdced2901&page=${pageNumber}`;

    if (genre) url += `&with_genres=${genre}`;
    if (year) url += `&year=${year}`;
    if (rating[0] && rating[1])
      url += `&vote_average.gte=${rating[0]}&vote_average.lte=${rating[1]}`;

    fetch(url)
      .then((res) => res.json())
      .then((json) => setMovieList(json.results));
  };

  useEffect(() => {
    getMovie(page, filters);
  }, [page, filters]); 

  const handleNextPage = () => {
    setPage((prevPage) => prevPage + 1);
  };

  const handlePreviousPage = () => {
    if (page > 1) {
      setPage((prevPage) => prevPage - 1);
    }
  };

  return (
    <><div className="movie-container">
      {movieList.map((movie) => (
        <div key={movie.id} className="movie-card">
          <img
            className="movie-poster"
            src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`}
            alt={movie.title} />
          <div className="movie-details">
            <h3 className="movie-title">{movie.title}</h3>
            <p className="movie-overview">{movie.overview}</p>
          </div>
        </div>
      ))}

      <div className="pagination-controls">
        <button
          className="pagination-button"
          onClick={handlePreviousPage}
          disabled={page === 1}
        >
          Previous
        </button>
        <button className="pagination-button" onClick={handleNextPage}>
          Next
        </button>
      </div>
    </div></>
  );
}

export default Movie;