'use client';
import { FunctionComponent, MouseEventHandler } from 'react';
import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
import { AppIcon } from '@/components';
import { Link } from '@/i18n/navigation';
import { LinkToPage } from '@/utils';

interface Props extends LinkToPage {
  selected?: boolean;
  onClick?: MouseEventHandler;
}

/**
 * Renders a single SideBar navigation item over the locale-aware `Link` (`@/i18n/navigation`) —
 * `href` is the unprefixed `ROUTES.*` path; the wrapper adds the active locale, so a click is one
 * navigation with no middleware redirect hop. `selected` is computed by the caller (`SideBarNavList`)
 * via the shared `matchActivePath` helper.
 * @component SideBarNavItem
 */
const SideBarNavItem: FunctionComponent<Props> = ({ icon, path, selected = false, subtitle, title, onClick }) => {
  return (
    <ListItemButton component={Link} href={path ?? '#'} selected={selected} onClick={onClick}>
      <ListItemIcon>{icon && <AppIcon icon={icon} />}</ListItemIcon>
      <ListItemText primary={title} secondary={subtitle} />
    </ListItemButton>
  );
};

export default SideBarNavItem;
