Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
    at SingleProduct (http://localhost:3000/static/js/bundle.js:2323:90)
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:589354:5)
    at Routes (http://localhost:3000/static/js/bundle.js:590045:5)
    at Router (http://localhost:3000/static/js/bundle.js:589979:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:587932:5)
    at Le (http://localhost:3000/static/js/bundle.js:596755:60)
    at EnvironmentProvider (http://localhost:3000/static/js/bundle.js:603129:5)
    at ColorModeProvider (http://localhost:3000/static/js/bundle.js:602152:5)
    at ThemeProvider (http://localhost:3000/static/js/bundle.js:13311:50)
    at ThemeProvider (http://localhost:3000/static/js/bundle.js:605787:5)
    at ChakraProvider (http://localhost:3000/static/js/bundle.js:603005:5)
    at ChakraProvider2 (http://localhost:3000/static/js/bundle.js:603352:5)
    at App
    at CartProvider (http://localhost:3000/static/js/bundle.js:7066:3)
    at FilterContextProvider (http://localhost:3000/static/js/bundle.js:7227:3)
    at AppProvider (http://localhost:3000/static/js/bundle.js:7394:3)
    at Auth0Provider (http://localhost:3000/static/js/bundle.js:12145:23)      in the file: import styled from "styled-components";
import React, { useEffect, useState } from 'react'
import { useParams } from "react-router-dom";
import { useProductContext } from "./context/productContext";
import FormatPrice from "./Helpers/FormatPrice";
import PageNavigation from "./components/PageNavigation";
import MyImage from "./components/MyImage";
import { Container } from "./Container";
import {TbReplace, TbTruckDelivery} from 'react-icons/tb'
import {MdSecurity} from 'react-icons/md'
import Star from "./components/Star";
import AddToCart from "./components/AddToCart";
import Modal from './Popup';
import { motion } from "framer-motion";
import { fadeIn } from "./components/variants";


const SingleProduct = () => {
  const [mainImageUrl, setMainImageUrl] = useState('');
  const [open, setOpen] = React.useState(1);

  const { getSingleProduct, isSingleLoading, singleProduct } = useProductContext();
  const { id } = useParams();

  useEffect(() => {
    // Attempt to fetch product data as the component mounts
    getSingleProduct(id);
  }, [id, getSingleProduct]);

  // React needs all hooks to be used in the same order
  // between renders, even when the component returns early.
  useEffect(() => {
    // Ensure ‘image’ is loaded before attempting to set the main image URL
    if (image && image.length > 0) {
      setMainImageUrl(image[0]); // Assuming ‘image’ might be an array
    }
  }, [singleProduct]);  // Depend on ‘singleProduct’ to re-trigger this effect when it updates

  if (!singleProduct || isSingleLoading) {
    // Early return should happen after all hooks have been called
    return <div className="page_loading">Loading...</div>;
  }

  // Destructuring ‘singleProduct’ after the possibility of an early return has been checked
  const { image, name, company, description, stock, price } = singleProduct;
  

  

  const transitionVariants = {
    initial: {
      x: "100%",
      width: "100%",
    },
    animate: {
      x: "0%",
      width: "0%",
    },
    exit: {
      x: ["0%", "100%"],
      width: ["0%", "100%"],
    },
  };

  return <Wrapper mainImageUrl={mainImageUrl}>
    <PageNavigation title={name} />
    <Container className="container">
      <motion.div 
        className="singleProda"
        variants={fadeIn("down", 0.4)}
        initial="hidden"
        animate="show"
        exit="hidden"
      >
        {/* Product Image */}
        <div>
          <MyImage imgs={image} setMainImageUrl={setMainImageUrl} />
        </div>
          {/* Product data */}
        <div className="product-data  mx-auto w-[50%]">
            <h2>{name}</h2>
            <p className="product-data-price ">
               MRP: 
               <del>
                <FormatPrice price={price + 250000}/>
               </del>
            </p>
            <p className="product-data-price product-data-real-price">
               Deal of the Day: 
                <FormatPrice price={price}/>
            </p>
            <p>{description}</p>
              <Modal />
            <div className="product-data-info">
              <p>Available: <span>{stock > 0 ? "In Stock" : "Not Available"}</span></p>
              <p>ID : <span> {id} </span></p>
              <p>Brand : <span> {company} </span></p>
            </div>
            <hr />
            {stock > 0 && <AddToCart product={singleProduct}/>}
          </div>
      </motion.div>
    </Container>
    </Wrapper>;
}





const Wrapper = styled.section`
  background-image: url(${(props) => props.mainImageUrl});
  background-repeat: no-repeat;
  background-size: cover; // Or whatever fits your design best
  background-position: center;
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.85);
  
  .container {
    padding: 9rem 0;
  }

  header {
    border-radius:none!important;
  }
  .product_images{
    display:flex;
    align-items:center;
  }
  .product-data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2rem;

    .product-data-warranty {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ccc;
      margin-bottom: 1rem;

      .product-warranty-data {
        text-align: center;

        .warranty-icon {
          background-color: rgba(220, 220, 220, 0.5);
          border-radius: 50%;
          width: 4rem;
          height: 4rem;
          padding: 0.6rem;
        }
        p {
          font-size: 1.4rem;
          padding-top: 0.4rem;
        }
      }
    }

    .product-data-price {
      font-weight: bold;
    }
    .product-data-real-price {
      color: ${({ theme }) => theme.colors.btn};
    }
    .product-data-info {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      font-size: 1.8rem;

      span {
        font-weight: bold;
      }
    }

    hr {
      max-width: 100%;
      width: 90%;
      /* height: 0.2rem; */
      border: 0.1rem solid #000;
      color: red;
    }
  }

  .product-images {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  @media (max-width: ${({ theme }) => theme.media.mobile}) {
    padding: 0 2.4rem;
  }
`;


export default SingleProduct;