/*
 * Custom Button
 */

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const CustomButton = ( { icon, buttonIconColor, hoverButtonIconColor, defaultColor, isHovered } ) => {
	// Determine the classes based on normal and hover color changes
	const isColorChanged = buttonIconColor && buttonIconColor !== defaultColor;
	const isHoverColorChanged = hoverButtonIconColor && hoverButtonIconColor !== defaultColor;

	const iconClass = `${icon.svg ? 'ssmb-inner-icon uploaded' : 'ssmb-inner-icon'}${isColorChanged ? ' has-custom-color' : ''}${isHoverColorChanged ? ' has-hover-color' : ''}`;

	const renderIcon = () => {
		if ( !icon || ( icon.iconName === "" && icon.prefix === "" && icon.svg === "" ) ) {
			return null; // Return null if no icon is set or if it's empty
		}

		// If it's an SVG, set it directly in the div without an extra wrapper
		if ( icon.svg ) {
			return {
				__html: icon.svg,
			};
		}

		// Render FontAwesome icon
		if ( icon.iconName ) {
			return (
				<FontAwesomeIcon
					icon = { [ icon.prefix, icon.iconName ] }
					style = { { color: buttonIconColor || 'inherit' } }
				/>
			);
		}

		// Fallback default icon if no other icon is present
		return (
			<FontAwesomeIcon icon = { [ 'fas', 'circle-notch' ] } style = { { width: '32px', height: '32px' } } />
		);
	};

	// If SVG is uploaded, use dangerouslySetInnerHTML directly to render it without any wrapping div
	if ( icon.svg ) {
		return (
			<div
				className={iconClass}
				style={{ fill: buttonIconColor || 'none' }}
				dangerouslySetInnerHTML={renderIcon()}
			/>
		)
	}

	// Otherwise, render the FontAwesome icon or fallback
	return <div className={ iconClass }>{ renderIcon() }</div>;
};

export default CustomButton;
