import React, { ReactNode, CSSProperties } from 'react';
import useButtonFeedbackAnimation from '../../hooks/useButtonFeedbackAnimation';

export interface ActionButtonProps {
  title: string;
  icon: ReactNode;
  onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  className?: string;
  style?: CSSProperties;
  showText?: boolean;
}

const ActionButton: React.FC<ActionButtonProps> = ({
  icon,
  title,
  onClick,
  className,
  style,
  showText,
}) => {
  const [click, triggerClick] = useButtonFeedbackAnimation(onClick);

  return (
    <button
      type="button"
      className={`actionButton${className || ''}${click ? ' onClick' : ''}`}
      title={title}
      onClick={triggerClick}
      style={style}
    >
      {icon}
      {showText ? <p>{title}</p> : null}
    </button>
  );
};

export default ActionButton;