'use client';
import { FunctionComponent, MouseEventHandler } from 'react';
import { Badge, 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. `badgeCount` renders a small unread dot on the icon (the
 * nurse support entry, §3.1) — omitted entirely when falsy, never a bare "0".
 * @component SideBarNavItem
 */
const SideBarNavItem: FunctionComponent<Props> = ({
  icon,
  path,
  selected = false,
  subtitle,
  title,
  onClick,
  badgeCount,
}) => {
  const iconNode = icon && <AppIcon icon={icon} />;
  return (
    <ListItemButton component={Link} href={path ?? '#'} selected={selected} onClick={onClick}>
      <ListItemIcon>
        {badgeCount ? (
          <Badge
            badgeContent={badgeCount}
            max={99}
            overlap="circular"
            sx={{ '& .MuiBadge-badge': { bgcolor: 'var(--bal-error)', color: 'var(--bal-error-contrast)' } }}
          >
            {iconNode}
          </Badge>
        ) : (
          iconNode
        )}
      </ListItemIcon>
      <ListItemText primary={title} secondary={subtitle} />
    </ListItemButton>
  );
};

export default SideBarNavItem;
