const { __ } = wp.i18n;

const MarkedResolved = ( { th } ) => {

	return (
		<div className="user-data-box cf-mark-as-resolved">
			<div className="user-data">
				<div className="user-data-header">
				<div className="user-avatar">
					<img
					src={th.resolvedBy.avatarUrl}
					alt={th.resolvedBy.username}
					/>
				</div>
				<div className="user-display-name">
					<span class="user-name">
					{th.resolvedBy.username}{" "}
					</span>
					{th.type === "sg" && (
					<time class="user-commented-date">
						{timeAgo(
						th.resolvedBy
							.sgResolvedTimestamp
						)}
						<span className="tooltip">
						{convertedDatetime(
							th.resolvedTimestamp
						)}
						</span>
					</time>
					)}
					{th.type === "el" && (
					<time class="user-commented-date">
						{timeAgo(th.updatedAt)}
						<span className="tooltip">
						{convertedDatetime(
							th.resolvedTimestamp
						)}
						</span>
					</time>
					)}
				</div>
				</div>
				<div className="cf-mark-as-user-data">
				{th.type === "sg" &&
					th.resolvedBy.action ===
					"accept" && (
					<div className="user-comment">
						<strong>
						{__(
							"Suggestion Accepted",
							"commenting-feature"
						)}
						</strong>
					</div>
					)}
				{th.type === "sg" &&
					th.resolvedBy.action ===
					"reject" && (
					<div className="user-comment">
						<strong>
						{__(
							"Suggestion Rejected",
							"commenting-feature"
						)}
						</strong>
					</div>
					)}
				{th.type !== "sg" && (
					<div className="user-comment mark-resolved-icon">
					<strong>
						{__(
						"Marked as Resolved",
						"commenting-feature"
						)}{" "}
					</strong>
					</div>
				)}
				</div>
			</div>
		</div>
	);
};

export default MarkedResolved;