/**
 * Header Component
 *
 * Page header with logo, plugin info and top-level actions
 *
 * @package Everyone_Accessibility_Suite
 */

import { __ } from '@wordpress/i18n';

function Header() {
	const { pluginName, pluginVersion, homeUrl, docsUrl } = window.evasAdmin || {};

	return (
		<header className="evas-admin-header">
			<div className="evas-admin-header__content">
				<div className="evas-admin-header__branding">
					<span className="dashicons dashicons-universal-access"></span>
					<h1 className="evas-admin-header__title">
						{pluginName || __( 'Everyone Accessibility Suite', 'everyone-accessibility-suite' )}
					</h1>
					{pluginVersion && (
						<span className="evas-admin-header__version">
							v{pluginVersion}
						</span>
					)}
				</div>

				<div className="evas-admin-header__actions">
					{docsUrl && (
						<a
							className="evas-admin-header__link"
							href={docsUrl}
							target="_blank"
							rel="noopener noreferrer"
						>
							<span className="dashicons dashicons-book"></span>
							{__( 'Documentation', 'everyone-accessibility-suite' )}
						</a>
					)}
					{homeUrl && (
						<a
							className="evas-admin-header__button"
							href={homeUrl}
							target="_blank"
							rel="noopener noreferrer"
						>
							{__( 'View Frontend', 'everyone-accessibility-suite' )}
							<span className="dashicons dashicons-external"></span>
						</a>
					)}
				</div>
			</div>
		</header>
	);
}

export default Header;