From 5dd492df40b820753a8a4b11193961d1b809cf40 Mon Sep 17 00:00:00 2001
From: Leon Xu <dcwinfield362@gmail.com>
Date: Sat, 3 Sep 2022 12:48:33 -0700
Subject: [PATCH] doc: create FeatureMovie function

---
 .../FeaturedMovie/FeaturedMovie.jsx           | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/components/FeaturedMovie/FeaturedMovie.jsx b/src/components/FeaturedMovie/FeaturedMovie.jsx
index e69de29..5e8b569 100644
--- a/src/components/FeaturedMovie/FeaturedMovie.jsx
+++ b/src/components/FeaturedMovie/FeaturedMovie.jsx
@@ -0,0 +1,32 @@
+import { Box, Typography, Card, CardContent, CardMedia } from '@mui/material';
+import { Link } from 'react-router-dom';
+
+import useStyles from './styles';
+
+function FeaturedMovie({ movie }) {
+    const classes = useStyles();
+
+    if (!movie) return null;
+
+    return (
+        <Box component={Link} to={`/movie/${movie.id}`} className={classes.featuredCardContainer}>
+            <Card className={classes.card} classes={{ root: classes.cardRoot }}>
+                <CardMedia
+                    media="picture"
+                    alt={movie.title}
+                    image={`https://image.tmdb.org/t/p/original/${movie?.backdrop_path}`}
+                    title={movie.title}
+                    className={classes.cardMedia}
+                />
+                <Box padding="20px">
+                    <CardContent className={classes.cardContent} classes={{ root: classes.cardContentRoot }}>
+                        <Typography variant="h5" gutterBottom>{movie.title}</Typography>
+                        <Typography variant="body2">{movie.overview}</Typography>
+                    </CardContent>
+                </Box>
+            </Card>
+        </Box>
+    );
+}
+
+export default FeaturedMovie;