interface ReconciliationEvent {
	id: string;
	storyId: string;
	status: string;
	message: string;
}

interface ReconciliationBannerProps {
	reconciliationEvents: ReconciliationEvent[];
}

export function ReconciliationBanner({
	reconciliationEvents,
}: ReconciliationBannerProps) {
	return (
		<div
			data-testid="reconciliation-banner"
			style={{
				padding: "6px 24px",
				background: "#1c2a1c",
				borderTop: "1px solid #2d4a2d",
				fontSize: "0.8em",
				color: "#7ec87e",
				maxHeight: "100px",
				overflowY: "auto",
				flexShrink: 0,
			}}
		>
			<div
				style={{
					fontWeight: 600,
					marginBottom: "2px",
					color: "#a0d4a0",
				}}
			>
				Reconciling startup state...
			</div>
			{reconciliationEvents.map((evt) => (
				<div
					key={evt.id}
					style={{
						color:
							evt.status === "failed"
								? "#d07070"
								: evt.status === "advanced"
									? "#80c880"
									: "#666",
						whiteSpace: "nowrap",
						overflow: "hidden",
						textOverflow: "ellipsis",
					}}
				>
					{evt.storyId ? `[${evt.storyId}] ` : ""}
					{evt.message}
				</div>
			))}
		</div>
	);
}