// 'use client'
// import React, {useState, useEffect, useCallback, useMemo} from 'react'
// import Container from '@mui/material/Container'
// import CardMedia from '@mui/material/CardMedia'
// import { Box, Typography } from '@mui/material'
// import Chip from '@mui/material/Chip';
// import { languages } from '@/utils/constant';
// import { Swiper, SwiperSlide } from 'swiper/react'
// import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';
// import axiosInstance from '@/services/axiosInstance'
// import { useDispatch, useSelector } from 'react-redux';
// import { setTopTenCourses } from '@/redux/slices/topTenSlice';
// import { toast } from 'react-toastify';

// import './TopTenCourses.css'
// import 'swiper/css'
// import 'swiper/css/navigation';
// import 'swiper/css/pagination';
// import 'swiper/css/scrollbar';

// const TopTenCourses = () => {
//   const [language, setLanguageState] = useState("en");
//   const dispatch = useDispatch();
//   const APIURL = process.env.NEXT_PUBLIC_API_URL;

//   const topTen = useSelector((state: any) => state.topTen);
//   const swiperConfig = {
//     slidesPerView: 1,
//     spaceBetween: 10,
//     // pagination: { clickable: true },
//     scrollbar:{draggable: true},
//     navigation: { enabled: true },
//     autoplay: { delay: 2000 },
//     breakpoints: {
//       640: { slidesPerView: 1, spaceBetween: 20 },
//       768: { slidesPerView: 2, spaceBetween: 30 },
//       1024: { slidesPerView: 3, spaceBetween: 40 },
//     },
//     modules: [Navigation, Pagination, Scrollbar, A11y],
//   };

//   const handleLanguageChange = useCallback((languageCode: string) => {
//     setLanguageState(languageCode);
//     if (languageCode != language) {
//     // axiosInstance.post(`${APIURL}/language_code/${languageCode}`)
//     axiosInstance.get(`${APIURL}/data/topten_en.json`)
//       .then((response) => {
//         dispatch(setTopTenCourses(response.data));
//         // toast("Fetched Successfully");
//       })
//       .catch((error) => {
//         console.error(error);
//         // toast("Fetched Failed");
//       });
//     }
//   }, [language]);

//   return (
//     <div>
//       <Container className="top_ten_slider">
//         <Box>
//           <Typography
//                   variant="h4"
//                   align="left"
//                   gutterBottom
//                   sx={{
//                     paddingBottom: '40px',
//                     marginBottom: 0,
//                     fontFamily: 'Poppins !important',
//                     fontSize: '32px',
//                     fontStyle: 'normal',
//                     fontWeight: 600,
//                     lineHeight: '42px',
//                     color: 'var(--Brand-2, #2E2E54)',
//                   }}
//                 >Top 10 Courses in India today</Typography>
//           <Box className="top_ten_language_pills">
//           {languages.map((search, index) => (
//             <Chip
//                   key={index}
//                   label={`${search.language_name}`}
//                   sx={{ 
//                     fontSize: '12px',
//                     fontStyle: 'normal',
//                     fontWeight: 400,
//                     lineHeight: '20px',
//                     border: '1px solid var(--Brand-1, #ABABBB)',
//                     backgroundColor: 'transparent !important',
//                     marginRight: "1rem",
//                     color:"#696969",
//                     cursor: "pointer",
//                     "&:hover" : {
//                       color: "#FFFFFF",
//                       backgroundColor: "#2E2E54 !important",
//                       border: '1px solid var(--Brand-1, #2E2E54)'
//                     },
//                     "&.active" : {
//                       color: "#FFFFFF",
//                       backgroundColor: "#2E2E54 !important",
//                       border: '1px solid var(--Brand-1, #2E2E54)'
//                     }
//                   }}
//                   onClick={()=>handleLanguageChange(search.language_code)}
//                   className={search.language_code === language ? 'active' : ''}
//                 />
//             ))}
//           </Box>
//           <Swiper {...swiperConfig} className="mySwiper">
//             {topTen ? topTen.map((search: any, index: number) => (
//             <SwiperSlide key={index}>
//               <div className="top_ten_slider_card">
//                 <div className="top_ten_slider_image">
//                   <span className="top_ten_slider_index">{index+1}</span>
//                   <CardMedia
//                     sx={{ height: 170 }}
//                     image={search.course_image}
//                     title={search.course_title}
//                     className="top_ten_slider_img"
//                   />                
//                 </div>
//                 <Typography className="top_ten_slide_title" gutterBottom variant="h5" component="div" align="left">
//                   {search.course_title}
//                 </Typography>
//               </div>
//             </SwiperSlide>
//             )) : (
//               <div>Loading...</div>
//             )}
//            </Swiper>
//         </Box>
//       </Container>
//     </div>
//   )
// }

// export default TopTenCourses;