Untitled

import React, { useState, useEffect } from 'react';
import Select from 'react-select';

const SearchBar = () => {
    const [inputValue, setInputValue] = useState('');
    const [options, setOptions] = useState([]);

    // Fonction pour charger les films depuis l'API
    const loadOptions = (inputValue) => {
        fetch(`https://api.themoviedb.org/3/search/movie?include_adult=false&language=en-US&page=1&query=${inputValue}`, {
            method: 'GET',
            headers: {
                accept: 'application/json',
                Authorization: 'Bearer VotreTokenIci'
            }
        })
        .then(response => response.json())
        .then(response => {
            const movies = response.results.map(movie => ({
                value: movie.id,
                label: movie.title
            }));
            setOptions(movies);
        })
        .catch(err => console.error(err));
    };

    // Gère le changement dans la barre de recherche
    const handleInputChange = (newValue) => {
        const inputValue = newValue.replace(/\W/g, '');
        setInputValue(inputValue);
        return inputValue;
    };

    useEffect(() => {
        if (inputValue) {
            loadOptions(inputValue);
        }
    }, [inputValue]);

    return (
        <Select
            value={inputValue}
            onInputChange={handleInputChange}
            options={options}
        />
    );
};

export default SearchBar;