import React from 'react';

const Button = ({ children, onClick, type = 'button', className = '', variant = '', size='', disabled }) => {
    let buttonClasses = '';
    if (size === 'sm') {
        buttonClasses += 'font-medium rounded-md text-xs text-center px-3 py-2 focus:outline-none ';
    } else {
        buttonClasses += 'font-medium rounded-md text-sm text-center px-5 py-2.5 focus:outline-none ';
    }
    
    switch (variant) {
        case 'primary':
            buttonClasses += 'text-white bg-blue-700 hover:bg-blue-800';
            break;

        case 'gd':
            buttonClasses += 'text-white bg-gradient-to-r from-blue-primary to-teal-primary hover:bg-gradient-to-bl ';
            break;
    
        default:
            buttonClasses += 'text-gray-900 bg-white hover:bg-gray-100';
            break;
    }

    return (
        <button type={type} className={`${className} ${buttonClasses}`} onClick={onClick} disabled={disabled}>
        {children}
        </button>
    );
};

export default Button;
