/**
 * 创作页顶栏（第一行）：站点 LOGO 在左，用户头像在右。
 *
 * 与知乎写作页一致：品牌与身份常驻顶部，正文工具条单独占第二行并居中，
 * 避免品牌文字挤占工具条的可视宽度。
 *
 * @package Jio
 */

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

type Props = {
	centerUrl: string;
	site: { home?: string; name?: string; logo?: string };
	viewer: { avatar?: string };
};

export function StudioMasthead({ centerUrl, site, viewer }: Props) {
	const brandName = String(site.name || '');
	const avatarUrl = String(viewer.avatar || '');
	const avatarHref = centerUrl || '/';

	return (
		<header className="jio-creator__masthead">
			<div className="jio-creator__masthead-left">
				<a className="jio-creator__back" href={centerUrl || '/'} aria-label={__('返回作者中心', 'jio')}>
					<i className="fa fas fa-angle-left" aria-hidden="true" />
				</a>
				<a
					className="jio-creator__brand"
					href={String(site.home || '/')}
					aria-label={brandName || __('返回首页', 'jio')}
				>
					{site.logo ? (
						<img className="jio-creator__brand-logo" src={String(site.logo)} alt={brandName} />
					) : (
						<span className="jio-creator__brand-text">{brandName}</span>
					)}
				</a>
			</div>

			<a className="jio-creator__me" href={avatarHref} aria-label={__('返回作者中心', 'jio')}>
				{avatarUrl ? (
					<img className="jio-creator__me-avatar" src={avatarUrl} alt="" width={32} height={32} />
				) : (
					<span className="jio-creator__me-avatar is-placeholder" aria-hidden="true">
						<i className="fa fas fa-user" />
					</span>
				)}
			</a>
		</header>
	);
}