import type { Movie } from "../types";
import DebounceInput from "./DebouceInput";

interface TmdbSearchInputProps {
	onSearch: (movies: Movie[]) => void;
}

export default function TmdbSearchInput({ onSearch }: TmdbSearchInputProps) {
	function handleOnSearchInputDebounce(value: string) {
		fetch(`/api/tmdb/movies/search?query=${value}`, {
			method: "GET",
			credentials: "include",
			headers: {
				Accept: "application/json",
				"Content-Type": "application/json",
			},
		})
			.then((res) => res.json())
			.then((json) => {
				onSearch(json.movies);
			})
			.catch((err) => console.log(err));
		onSearch([]);
	}

	return (
		<DebounceInput
			className="form-control"
			placeholder="Search here"
			onDebounce={handleOnSearchInputDebounce}
			debouceDelay={1000}
		/>
	);
}