import React from 'react';
import Menu from './Menu';
import styles from './AuthorName.css';
import {ClickOutside} from 'plugin-api/beta/client/components';
import cn from 'classnames';

export default ({data, root, asset, comment, contentSlot, menuVisible, toggleMenu, hideMenu}) => {
  return (
    <ClickOutside onClickOutside={hideMenu}>
      <div className={cn(styles.root, 'talk-plugin-author-menu')}>
        <button
          className={cn(styles.button, 'talk-plugin-author-menu-button')}
          onClick={toggleMenu}
        >
          <span className={styles.name}>
            {comment.user.username}
          </span>
        </button>
        {menuVisible &&
          <Menu
            data={data}
            root={root}
            asset={asset}
            comment={comment}
            contentSlot={contentSlot}
          />
        }
      </div>
    </ClickOutside>
  );
};