Adds product pop up

src/component/Product.jsx

-import React from 'react'
+import React, { useState } from 'react'
 import './../styles/Product.css'
+import { Modal, Button, Alert } from "react-bootstrap";
 
-export default function Product({product}) {
+export default function Product({ product }) {
+  const [show, setShow] = useState(false);
+  const [showConfirm, setShowConfirm] = useState(false);
 
-  return (
-    <div>
-        <div className="img-container">
-            <img src={product.productImageUrl} alt={product.productName}/>
-        </div>
-        <div className="prod-info">
-            <h5>{product.productName}</h5>
-            {product.sku}<br/>
-            ${product.price}<br/>
-            In Stock: {product.stock}
-        </div>		
+  const handleClose = () => {
+    setShow(false);
+    handleCloseConfirm();
+  }
+  const handleShow = () => setShow(true);
+  const handleShowConfirm = () => setShowConfirm(true);
+  const handleCloseConfirm = () => setShowConfirm(false);
+
+  return (<div>
+    <div className="img-container" onClick={handleShow}>
+      <img className="grid-img" src={product.productImageUrl} alt={product.productName} />
+    </div>
+    <div className="prod-info">
+      <h5>{product.productName}</h5>
+      {product.sku}<br />
+      ${product.price}<br />
+      In Stock: {product.stock}
     </div>
+
+    <Modal show={show} onHide={handleClose}>
+      <Modal.Header closeButton>
+        <Modal.Title>{product.productName}</Modal.Title>
+      </Modal.Header>
+
+      <Modal.Body>
+        <div className="modal-img">
+          <img src={product.productImageUrl} alt={product.productName} />
+        </div>
+        <h5>{product.sku}</h5>
+          ${product.price}<br />
+        {product.productDescription}<br />
+          In Stock: {product.stock}
+      </Modal.Body>
+
+      <Modal.Footer>
+        <Button variant="danger" onClick={handleShowConfirm}>
+          Delete product
+          </Button>
+
+        <Button variant="secondary" onClick={handleClose}>
+          Close
+          </Button>
+        <Button variant="primary" onClick={handleClose}>
+          Edit Product
+          </Button>
+
+
+        <Alert show={showConfirm} variant="danger">
+          <h5> Are you sure?</h5>
+
+          <Button variant="secondary" onClick={handleCloseConfirm}>
+            Cancel
+          </Button>
+          <Button variant="danger">
+            Yes, delete
+          </Button>
+
+        </Alert>
+      </Modal.Footer>
+    </Modal>
+  </div>
   )
 }

src/styles/Product.css

+img {
+    max-width: 100%;
+    max-height: 250px;
+}
+
 .img-container{
     position:relative;
     overflow:hidden;
     padding-bottom:100%;
 }
-img {
+.grid-img {
     position: absolute;
     max-width: 100%;
     max-height: 100%;
     top: 50%;
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
+}
+
+.modal-img {
+    display: flex;
+    justify-content: center;
+}
+
+.alert{
+    width: 100%;
 }
\ No newline at end of file