import React, { useEffect } from 'react';
import ecreIcons from '../../components/core/icons';
import { translate } from '../../Helper';

const ChangesLog = () => {
	const HW_CONFIG_ACCOUNT = 'JRPBQx';
	const trigger = '#ecre_changelog';

	useEffect(() => {
		// Load the Headway widget script
		const script = document.createElement('script');
		script.src = 'https://cdn.headwayapp.co/widget.js';
		script.async = true;
		document.body.appendChild(script);

		// Configure the Headway widget
		window.HW_config = {
			selector: trigger,
			account: HW_CONFIG_ACCOUNT,
		};

		// Cleanup the script when the component unmounts
		return () => {
			document.body.removeChild(script);
		};
	}, [trigger, HW_CONFIG_ACCOUNT]);

	return (
		<div className="whats-new ecre-group ecre-whitespace-nowrap ecre-flex ecre-items-center ecre-gap-[5px]" id="ecre_changelog">
			<div className="icon ecre-leading-[1]">{ecreIcons.gift}</div>
			<div className="ecre-text-gray-900 ecre-text-sm ecre-font-medium ecre-transition group-hover:ecre-text-[#6366F1]">{translate('whats_new')}</div>
		</div>
	);
};

export default ChangesLog;
