import React from 'react';
import type { ReactNode } from 'react';
import './ActionButton.css';

interface ActionButtonProps {
  children: ReactNode;
  variant?: 'primary' | 'secondary';
  size?: 'medium' | 'large';
  disabled?: boolean;
  loading?: boolean;
  onClick?: () => void;
  type?: 'button' | 'submit' | 'reset';
  className?: string;
  title?: string;
}

export const ActionButton: React.FC<ActionButtonProps> = ({
  children,
  variant = 'primary',
  size = 'medium',
  disabled = false,
  loading = false,
  onClick,
  type = 'button',
  className = '',
  title,
}) => {
  const baseClasses = 'action-button';
  const variantClass = variant;
  const sizeClass = size === 'large' ? 'large' : '';
  
  const classes = [
    baseClasses,
    variantClass,
    sizeClass,
    className
  ].filter(Boolean).join(' ');

  return (
    <button
      type={type}
      className={classes}
      disabled={disabled || loading}
      onClick={onClick}
      title={title}
    >
      {loading ? 'Loading...' : children}
    </button>
  );
};