/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */

import {IconProp} from '@fortawesome/fontawesome-svg-core';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';

import {Position, Tooltip} from 'components/tooltip';

import {IconButtonContainer} from './styles';

interface IIconButton {
  onClick: () => void;
  tooltipText: string;
  icon: IconProp;
  className?: string;
}

const IconButton = ({onClick, tooltipText, icon, className}: IIconButton) => (
  <Tooltip position={Position.Bottom} message={tooltipText}>
    <IconButtonContainer className={`icon-button ${className}`} role="link" tabIndex={-11} onKeyDown={undefined} onClick={onClick}>
      <FontAwesomeIcon icon={icon} />
    </IconButtonContainer>
  </Tooltip>
);

export default IconButton;
