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

export default ({data, root, asset, comment, contentSlot}) => {
  if (contentSlot) {
    return (
      <div className={cn(styles.menu, 'talk-plugin-author-menu-popup')}>
        <Slot
          fill={contentSlot}
          data={data}
          queryData={{asset, root, comment}}
        />
      </div>
    );
  }

  return (
    <div className={cn(styles.menu, 'talk-plugin-author-menu-popup')}>
      <Slot
        className={cn('talk-plugin-author-menu-infos')}
        fill={'authorMenuInfos'}
        data={data}
        queryData={{asset, root, comment}}
      />
      <Slot
        className={cn(styles.actions, 'talk-plugin-author-menu-actions')}
        fill={'authorMenuActions'}
        data={data}
        queryData={{asset, root, comment}}
      />
    </div>
  );
};