import React, { FunctionComponent } from 'react';
import cn from 'classnames';

import { Button } from '../../Button';
import '../../Avatar/styles.scss';
import { useTheme } from '../../Theme';
import { UsersCountButtonProps } from '../types';

export const UsersCountButton: FunctionComponent<UsersCountButtonProps> = ({ onClick, size = 'medium', styles, count }) => {
  const classNames = cn({
    users__item: true,
    [size]: true,
  });

  const theme = useTheme();

  return (
    <Button
      mode="icon-mode"
      icon={
        <div
          className={classNames}
          style={
            styles
              ? { ...styles }
              : {
                  border: `${theme.pallet.gray20} 1px solid`,
                  color: theme.text.secondary,
                  backgroundColor: theme.background.light,
                }
          }
        >
          <div className="count-container">+{count}</div>
        </div>
      }
      onClick={onClick}
    />
  );
};
