import React from 'react';
import { TSidebarItem } from '../../common/types';
import { useStyles } from './styles/styles';
import classNames from 'classnames';

export const SidebarItem: React.FC<Omit<TSidebarItem, 'url'>> = ({
  label,
  icon,
  ...restProps
}) => {
  const classes = useStyles();
  return (
    <li
      className={classNames(classes.sidebarItem, {
        [classes.activeItem]: restProps.active,
      })}
      {...restProps}
    >
      {icon}
      <span>{label}</span>
    </li>
  );
};
