import React, { useEffect, useState } from "react";
import style from "./categoryMenu.module.css";
import { ArrowBackIos, ArrowForwardIos } from "@mui/icons-material";
import Loader from "@/components/utils/loader";
import { useSelector } from "react-redux";
import NextImage from "@/other/NextImage";
import { useRouter } from "next/router";

const CategoryMenu = (props) => {
  const category = useSelector((state) => state.categoryStore.category);
  const loader = useSelector((state) => state.categoryStore.loader);
  const router = useRouter();

  return (
    <React.Fragment>
      <div
        className={`${style.category_menu_section} ${
          props.className ? props.className : ""
        }`}
      >
        <div className={style.category_menu}>
          <ul>
            {category.map((item, index) => (
              <li
                key={index}
                onClick={() =>
                  router.push(`/store/category[${item._id}]_${item.name}`)
                }
              >
                {item.name}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </React.Fragment>
  );
};

export default CategoryMenu;
