import { SidebarExactNavLink } from './Sidebar';
import { To } from 'components/router/types';

export const SidebarNavLinkWithCount = ({
  to,
  name,
  count,
}: {
  to: To;
  name: string;
  count: number;
}) => {
  return (
    <SidebarExactNavLink to={to}>
      <div className="flex justifyBetween alignCenter spacing1">
        <div className="truncate" title={name}>
          {name}
        </div>
        {count !== undefined && (
          <div
            className="fz12 mark--gray pill paddingX1"
            style={{ fontSize: 11 }}
            title="Unique profiles"
          >
            {count}
          </div>
        )}
      </div>
    </SidebarExactNavLink>
  );
};