movie details, back button ok

src/components/App.jsx

@@ -1,14 +1,19 @@
 import React from 'react';
 import { Routes, Route } from 'react-router-dom';
+
 import Navbar from './Navbar/Navbar';
 import Home from './Home/Home';
+import Movies from './Movies/Movies';
+import MovieDetails from './MovieDetails/MovieDetails';
 
 function App() {
   return (
     <>
       <Navbar />
       <Routes>
         <Route path="/" element={<Home />} />
+        <Route path="/movies" element={<Movies />} />
+        <Route path="/movies/:movieId" element={<MovieDetails />} />;
       </Routes>
     </>
   );

src/components/MovieDetails/MovieDetails.jsx

@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { getMovieDetails } from '../../api';
+import styles from './MovieDetails.module.css';
+
+const MovieDetails = () => {
+  const { movieId } = useParams();
+
+  const [movie, setMovie] = useState(null);
+
+  useEffect(() => {
+    const fetchMovieDetails = async () => {
+      try {
+        const data = await getMovieDetails(movieId);
+        setMovie(data);
+      } catch (error) {
+        console.error('Failed to fetch movie details:', error);
+      }
+    };
+    fetchMovieDetails();
+  }, [movieId]);
+
+  if (!movie) return <div>Loading...</div>;
+
+  return (
+    <div className={styles.container}>
+      <button onClick={() => window.history.back()} className={styles.button}>
+        Go back
+      </button>
+      <img
+        src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`}
+        alt={movie.title}
+        className={styles.poster}
+      />
+      <h2>
+        {movie.title} ({movie.release_date.split('-')[0]})
+      </h2>
+      <p>User Score: {movie.vote_average * 10}%</p>
+      <h3>Overview</h3>
+      <p>{movie.overview}</p>
+      <h3>Genres</h3>
+      <p>{movie.genres.map(genre => genre.name).join(', ')}</p>
+
+      <h3>Additional information</h3>
+      <ul>
+        <li>
+          <Link to={`/movies/${movieId}/cast`} className={styles.link}>
+            Cast
+          </Link>
+        </li>
+        <li>
+          <Link to={`/movies/${movieId}/reviews`} className={styles.link}>
+            Reviews
+          </Link>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default MovieDetails;

src/components/MovieDetails/MovieDetails.module.css

@@ -0,0 +1,23 @@
+.container {
+  padding: 20px;
+}
+
+.button {
+  padding: 8px 16px;
+  margin-bottom: 20px;
+}
+
+.poster {
+  width: 200px;
+  float: left;
+  margin-right: 20px;
+}
+
+.link {
+  color: #007bff;
+  text-decoration: none;
+}
+
+.link:hover {
+  text-decoration: underline;
+}

src/components/Movies/Movies.jsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { searchMovies } from '../../api';
+import styles from './Movies.module.css';
+
+const Movies = () => {
+  const [query, setQuery] = useState('');
+  const [movies, setMovies] = useState([]);
+
+  const handleSearch = async e => {
+    e.preventDefault();
+    const data = await searchMovies(query);
+    setMovies(data.results);
+  };
+
+  return (
+    <div className={styles.container}>
+      <form onSubmit={handleSearch} className={styles.form}>
+        <input
+          type="text"
+          value={query}
+          onChange={e => setQuery(e.target.value)}
+          placeholder="Search for a movie"
+          className={styles.input}
+        />
+        <button type="submit" className={styles.button}>
+          Search
+        </button>
+      </form>
+      <ul className={styles.list}>
+        {movies.map(movie => (
+          <li key={movie.id} className={styles.item}>
+            <Link to={`/movies/${movie.id}`} className={styles.link}>
+              {movie.title}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default Movies;

src/components/Movies/Movies.module.css

@@ -0,0 +1,35 @@
+.container {
+  padding: 20px;
+}
+
+.form {
+  margin-bottom: 20px;
+}
+
+.input {
+  padding: 8px;
+  margin-right: 10px;
+  width: 300px;
+}
+
+.button {
+  padding: 8px 16px;
+}
+
+.list {
+  list-style: none;
+  padding: 0;
+}
+
+.item {
+  margin-bottom: 8px;
+}
+
+.link {
+  color: #007bff;
+  text-decoration: none;
+}
+
+.link:hover {
+  text-decoration: underline;
+}