import React, { ReactNode } from 'react';
import './GameButton.css';

interface GameButtonProps {
    children: ReactNode;
    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
    variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'info' | 'warning';
    size?: 'sm' | 'md' | 'lg';
    disabled?: boolean;
    className?: string;
    style?: React.CSSProperties;
}

export const GameButton: React.FC<GameButtonProps> = ({
    children,
    onClick,
    variant = 'primary',
    size = 'md',
    disabled = false,
    className = '',
    style
}) => {
    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
        if (disabled) return;
        if (onClick) onClick(e);
    };

    return (
        <button
            className={`game-btn ${variant} ${size} ${className}`}
            onClick={handleClick}
            disabled={disabled}
            style={style}
        >
            {children}
        </button>
    );
};
