ok

src/components/Carousel.js

@@ -1,21 +1,18 @@
 import React, { useState } from "react";
 import styles from "./Carousel.module.css"; // Import CSS module
 
-const Carousel = ({ items, onSelect }) => {
-  const [selectedIndex, setSelectedIndex] = useState(0); // Start at the first item
+const Carousel = ({ selectedIndex, items, onSelect }) => {
 
   const moveToNext = () => {
     console.log('aa')
     if (selectedIndex < items.length - 1) {
         console.log('bb')
-      setSelectedIndex(selectedIndex + 1);
       onSelect(selectedIndex + 1); // Send the next index to the parent
     }
   };
 
   const moveToPrev = () => {
     if (selectedIndex > -1) {
-      setSelectedIndex(selectedIndex - 1);
       onSelect(selectedIndex - 1); // Send the previous index to the parent
     }
   };
@@ -27,9 +24,9 @@ const Carousel = ({ items, onSelect }) => {
         <div
           className={`${styles.carouselItem} ${styles.prev}`}
           onClick={moveToPrev}
-          style={{ visibility: selectedIndex === -1 ? "hidden" : "visible" }}
+          style={{ visibility: selectedIndex === -1 && items.length > 0 ? "hidden" : "visible" , backgroundColor: items.length < 1 ? '#919191':'#007bff'}}
         >
-          {selectedIndex === -1 ? "+" : items[selectedIndex - 1]?.name || "+"}
+          {selectedIndex === -1 ?  (items.length > 0 ? "+" : "") : items[selectedIndex - 1]?.name || "+"}
         </div>
 
         {/* Current Item */}
@@ -42,7 +39,7 @@ const Carousel = ({ items, onSelect }) => {
           className={`${styles.carouselItem} ${styles.next}`}
           onClick={moveToNext}
           style={{
-            visibility: selectedIndex === items.length -1 ? "hidden" : "visible",
+            visibility: selectedIndex === items.length -1 && items.length > 0 ? "hidden" : "visible", backgroundColor: items.length < 1 ? '#919191':'#007bff'
           }}
         >
           {selectedIndex < items.length - 1 && items[selectedIndex + 1]?.name}