import React from 'react';
import { TNavbarItem } from 'common/types';
import { useStyles } from './styles/styles';
import classNames from 'classnames';
import { CustomButton } from 'components/button/custom-button';

export const NavbarItem: React.FC<TNavbarItem> = ({ label, ...props }) => {
  const classes = useStyles();
  return (
    <li
      className={classNames(classes.navbarItem, {
        [classes.active]: props.active,
      })}
      {...props}
    >
      <CustomButton
        classes={{ root: classes.navbarButton }}
        style={{ color: !props.active ? '#252525' : '#4f9aff' }}
        label={label}
        size="large"
      />
    </li>
  );
};
