import { useState } from "react";
import type { Movie } from "../types";
import TmdbSearchInput from "./TmdbSearchInput";
import GroupMoviesList from "./lists/movies/GroupMoviesList";

interface TmdbSearchProps {
	onSearch: (movie: Movie) => void;
}

export default function TmdbSearch({ onSearch }: TmdbSearchProps) {
	const [movies, setMovies] = useState<Movie[]>([]);

	function handleOnSearch(movies: Movie[]) {
		setMovies(movies);
	}

	return (
		<>
			<div className="row">
				<div className="col">
					<TmdbSearchInput onSearch={handleOnSearch} />
				</div>
			</div>
			<div style={{ marginTop: "8px" }} className="row">
				<div className="col">
					<GroupMoviesList movies={movies} onClick={onSearch} />
				</div>
			</div>
		</>
	);
}