/*
 * Icon Preview in the right settings sidebar
 */

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons';

const ButtonIconPreview = ( { icon } ) => {
	if ( !icon ) {
		return (
			<FontAwesomeIcon icon = { faCircleNotch } style = { { width: '32px', height: '32px', opacity: 0.3 } } />
		);
	}

	// Check if the icon is a custom SVG
	if ( icon.svg ) {
		return (
			<div
				className="ssmb-inner-icon uploaded-svg"
				dangerouslySetInnerHTML = { { __html: icon.svg } } // Render the uploaded SVG
				style = { { width: '32px', height: '32px' } }
			/>
		);
	}

	if ( icon.iconName ) {
		return (
			<FontAwesomeIcon
				icon = { [icon.prefix, icon.iconName] }
				style = { { width: '32px', height: '32px' } }
			/>
		);
	}

	return (
		<FontAwesomeIcon icon = { faCircleNotch } style = { { width: '32px', height: '32px', opacity: 0.3 } } />
	);
};

export default ButtonIconPreview;
