import { FaRegCircleCheck } from 'react-icons/fa6';
import gearImg from '../../assets/32x32/Gear.png';
import { __ } from '@wordpress/i18n';

const Header = (props) => {
	const { activeAccount, accounts, version } = EDBIData;
	const { settings, setSettings, isSaving, setSaving, title } = props;

	const saveSettings = () => {
		setSaving(true);
	};

	return (
		<div className='edbi-shortcode-header'>
			<div className='edbi-header__left'>
				<div className='edbi-header__left__img__container'>
					<img
						className='edbi-header__left__img'
						src={gearImg}
						alt={__('Gear', 'easy-dropbox-integration')}
					/>
				</div>
				<h2 className='edbi-header__left__title'>
					{title || __('Settings', 'easy-dropbox-integration')}
					<span className='edbi-version'>v{version}</span>
				</h2>
			</div>
			<div>
				<button className='edbi-button edbi-button--primary' onClick={saveSettings}>
					<FaRegCircleCheck className='edbi-add-icon' />
					{__('Save Changes', 'easy-dropbox-integration')}
				</button>
			</div>
		</div>
	);
};

export default Header;