import { useEffect, useState } from "react"

const Genres = ({id}) => {

    const baseURL = 'https://api.themoviedb.org/3'
    const API_KEY = '8216fbb9997cd81a67471e6cb5a6f2df'
    const [genres, setGenres] = useState()

    useEffect(() => {
        fetch(`${baseURL}/movie/${id}?api_key=${API_KEY}`).then((res) => res.json()).then((data) => {
            console.log('MOVIE', data.genres)
            setGenres(data.genres)
        })
    }, [])

    return (
        <div className="text-white/60 gap-x-3 text-xs flex flex-row flex-wrap relative">
            {genres?.map((genre) => {
                return (
                    <div>{genre.name}</div>
                )
            })}
        </div>
    )
}

export default Genres