import { PATHS } from '@/shared/constants/paths';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { MenuCategoryProps } from '../model/types';

export const MenuCategory = ({
  category,
  categoryIcon,
  items,
  setMenuOn
}: MenuCategoryProps) => {
  const { navigate } = useNavigate();

  const onClickToNavigate = (path?: string) => {
    if(!!path){
      setMenuOn(false);
      navigate(path);
    }
  };

  const getMenuItems = () => {
    let rs = [];
    for(let i=0;i<items.length;i++){
      let title = items[i]?.title;
      let path = items[i]?.path;
      let key = 'menu-item-key-'+i;
      rs.push(
        <li
          key={ key }
          onClick={ () => onClickToNavigate(path) }
        >{ title }</li>
      );
    }
    return rs;
  };

  return (
    <>
      <div className="menu-category">
        <div className="category-header">
          <div className={ 'category-icon ' + categoryIcon }></div>
          <span>{ category }</span>
        </div>
        <ul className="category-items">
          { getMenuItems() }
        </ul>
      </div>
    </>
  );
};