const { __ } = wp.i18n;

const UserDataHeader = ( { c, th } ) => {

	return (
		<div className="user-data-header">
			<div className="user-avatar">
				<img
				src={c.userData.avatarUrl}
				alt={c.userData.username}
				/>
			</div>
			<div className="user-display-name">
				<span class="user-name">
				{c.userData?.username.charAt(0).toUpperCase() +
					c.userData?.username.slice(1)}{" "}
				<span className="tooltip">
					{c.userData?.userRole.charAt(0).toUpperCase() +
					c.userData?.userRole.slice(1)}{" "}
				</span>{" "}
				</span>
				{"deleted" === c.status &&
				th.type === "el" &&
				"" !== c.created_at ? (
				<time class="user-commented-date">
					<span>
					{timeAgo(c.created_at)}
					</span>
					<span className="tooltip">
					{convertedDatetime(
						c.created_at.toString()
					)}
					</span>
				</time>
				) : (
				<time class="user-commented-date">
					<span>{timeAgo(c.id)}</span>
					<span className="tooltip">
					{convertedDatetime(
						c.id.toString()
					)}
					</span>
				</time>
				)}
			</div>
		</div>
	)

};

export default UserDataHeader;