/* eslint-disable react/prop-types */
import React, { useEffect, useRef } from 'react';
import NextLink from 'next/link';

import { ListItem, ListItemButton, ListItemIcon, ListItemText } from '@/mui/components';

function MenuItemWithScroll(props) {
  const itemRef = useRef(null);

  useEffect(() => {
    if (props.selected) {
      itemRef.current?.scrollIntoView(true);
    }
  }, [props.selected]);

  return (
    <ListItem ref={itemRef} disablePadding>
      <ListItemButton selected={props.selected} disabled={!props.path} component={NextLink} href={props.path}>
        <ListItemIcon style={{ color: props.color }}>{props.icon}</ListItemIcon>
        <ListItemText primary={props.title} />
      </ListItemButton>
    </ListItem>
  );
}

export default MenuItemWithScroll;
