content: // @flow
  
  import { makeStyles } from '@material-ui/styles';
  import React from 'react';
  
  import { QuickActionButton } from '../../../base/components';
  
  type Props = {
  
      /**
       * Label used for accessibility.
       */
      accessibilityLabel: string,
  
      /**
       * Component children.
       */
      children: string,
  
      /**
       * Button class name.
       */
      className?: string,
  
      /**
       * Click handler function.
       */
      onClick: Function,
  
      /**
       * Whether or not the button is secondary.
       */
      secondary?: boolean,
  
      /**
       * Data test id.
       */
      testId: string
  }
  
  const useStyles = makeStyles(theme => {
      return {
          secondary: {
              backgroundColor: theme.palette.ui04
          }
      };
  });
  
  const LobbyParticipantQuickAction = ({
      accessibilityLabel,
      children,
      className,
      onClick,
      secondary = false,
      testId
  }: Props) => {
      const styles = useStyles();
  
      return (
          <QuickActionButton
              accessibilityLabel = { accessibilityLabel }
              className = { `${secondary ? styles.secondary : ''} ${className ?? ''}` }
              onClick = { onClick }
              testId = { testId }>
              {children}
          </QuickActionButton>
      );
  };
  
  export default LobbyParticipantQuickAction;
  