import {Button as HeadlessButton} from '@headlessui/react';
import {Dashicon} from '@wordpress/components';

const Button = ( {children, onClick, variant = 'secondary', icon, className = '', disabled = false, ...props} ) => {
	const classNames = [
		`adpresso-color-${variant}`,
		className
	].filter( Boolean ).join( ' ' );

	const renderIcon = () => {
		if ( !icon ) {
			return null;
		}

		if ( typeof icon === 'string' ) {
			return <Dashicon icon={icon}/>;
		}

		return icon;
	};

	return (
		<HeadlessButton className={classNames} onClick={onClick} disabled={disabled} {...props}>
			{icon && (
				<span className="adpresso-btn-icon">
                  {renderIcon()}
              </span>
			)}
			{children}
		</HeadlessButton>
	);
};

export default Button;