text: import React, { useEffect, useState } from "react";
  import axios from "./axios";
  import "./Row.css";
  import YouTube from "react-youtube";
  import movieTrailer from 'movie-trailer';
  
  const base_url = "https://image.tmdb.org/t/p/w200/";
  
  function Row({ title, fetchUrl }) {
    const [movies, setMovies] = useState([]);
    const [trailerUrl, setTrailerUrl] = useState('');
  
    // A snipped of code which runs based on a specific condition/variable
    useEffect(() => {
      async function fetchData() {
        const request = await axios.get(fetchUrl);
        setMovies(request.data.results);
        return request;
      }
      fetchData();
    }, [fetchUrl]);
  
    const opts = {
      heigth: '390',
      width: '100%',
      playerVars: {
        autoplay:1,
      }
    };
  
    const handleClick = (movie) => {
      if (trailerUrl) {
        setTrailerUrl('');
      } else {
        movieTrailer(movie?.name || movie?.name || movie?.original_name || ' ')
        .then(url => {
          const urlParams = new URLSearchParams(new URL(url).search);
          setTrailerUrl(urlParams.get('v'));
        })
        .catch(err => {
          console.log(err)
        })
      }
    };
  
    return (
      <div className="row">
        <h2>{title}</h2>
        <div className="row-posters">
          {movies.map((movie) => (
            <img
              key={movie.id}
              onClick={() => handleClick(movie)}
              className="row-poster"
              src={`${base_url}${movie.poster_path}`}
              alt={movie.name}
            />
          ))}
        </div>
        {trailerUrl && <YouTube videoId={trailerUrl} opts={opts} />}
      </div>
    );
  }
  
  export default Row;
  