cast done, reviews done

src/components/App.jsx

@@ -5,6 +5,8 @@ import Navbar from './Navbar/Navbar';
 import Home from './Home/Home';
 import Movies from './Movies/Movies';
 import MovieDetails from './MovieDetails/MovieDetails';
+import Cast from './Cast/Cast';
+import Reviews from './Reviews/Reviews';
 
 function App() {
   return (
@@ -14,6 +16,8 @@ function App() {
         <Route path="/" element={<Home />} />
         <Route path="/movies" element={<Movies />} />
         <Route path="/movies/:movieId" element={<MovieDetails />} />;
+        <Route path="/movies/:movieId/cast" element={<Cast />} />;
+        <Route path="/movies/:movieId/reviews" element={<Reviews />} />;
       </Routes>
     </>
   );

src/components/Cast/Cast.jsx

@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { getMovieCredits } from '../../api';
+import styles from './Cast.module.css';
+
+const Cast = () => {
+  const { movieId } = useParams();
+  const [cast, setCast] = useState([]);
+
+  useEffect(() => {
+    const fetchMovieCredits = async () => {
+      try {
+        const data = await getMovieCredits(movieId);
+        setCast(data.cast);
+      } catch (error) {
+        console.error('Failed to fetch movie credits:', error);
+      }
+    };
+
+    fetchMovieCredits();
+  }, [movieId]);
+
+  return (
+    <div className={styles.container}>
+      <button onClick={() => window.history.back()} className={styles.button}>
+        Go back
+      </button>
+      <h3>Cast</h3>
+      <ul className={styles.list}>
+        {cast.map(actor => (
+          <li key={actor.cast_id} className={styles.item}>
+            <img
+              src={`https://image.tmdb.org/t/p/w200${actor.profile_path}`}
+              alt={actor.name}
+              className={styles.image}
+            />
+            <p>{actor.name}</p>
+            <p>Character: {actor.character}</p>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default Cast;

src/components/Cast/Cast.module.css

@@ -0,0 +1,22 @@
+.container {
+  padding: 20px;
+}
+
+.list {
+  list-style: none;
+  padding: 0;
+}
+
+.item {
+  margin-bottom: 20px;
+}
+
+.image {
+  width: 100px;
+  margin-right: 20px;
+}
+
+.button {
+  padding: 8px 16px;
+  margin-bottom: 20px;
+}

src/components/Reviews/Reviews.jsx

@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { getMovieReviews } from '../../api';
+import styles from './Reviews.module.css';
+
+const Reviews = () => {
+  const { movieId } = useParams();
+  const [reviews, setReviews] = useState([]);
+
+  useEffect(() => {
+    const fetchMovieReviews = async () => {
+      try {
+        const data = await getMovieReviews(movieId);
+        setReviews(data.results);
+      } catch (error) {
+        console.error('Failed to fetch movie reviews:', error);
+      }
+    };
+
+    fetchMovieReviews();
+  }, [movieId]);
+
+  if (reviews.length === 0) {
+    return (
+      <p className={styles.message}>
+        We don't have any reviews for this movie.
+      </p>
+    );
+  }
+
+  return (
+    <div className={styles.container}>
+      <button onClick={() => window.history.back()} className={styles.button}>
+        Go back
+      </button>
+      <h3>Reviews</h3>
+      <ul className={styles.list}>
+        {reviews.map(review => (
+          <li key={review.id} className={styles.item}>
+            <h4>{review.author}</h4>
+            <p>{review.content}</p>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default Reviews;

src/components/Reviews/Reviews.module.css

@@ -0,0 +1,22 @@
+.container {
+  padding: 20px;
+}
+
+.list {
+  list-style: none;
+  padding: 0;
+}
+
+.item {
+  margin-bottom: 20px;
+}
+
+.message {
+  padding: 20px;
+  font-size: 18px;
+}
+
+.button {
+  padding: 8px 16px;
+  margin-bottom: 20px;
+}