import type { ChatMessagePart } from "../../types";

import "./StepPart.scss";

interface StepPartProps {
	part: Extract<ChatMessagePart, { type: "step" }>;
}

export default function StepPart({ part }: StepPartProps) {
	if (!part.label) {
		return null;
	}

	const isRunning = part.status === "running";
	const isError = part.status === "error";
	const label = part.label;

	return (
		<div
			className={`chat-message-part-step ${isRunning ? "is-running" : ""} ${isError ? "is-error" : ""}`.trim()}
		>
			{isRunning && <span className="chat-message-part-step-spinner" />}
			<span className="chat-message-part-step-label">{label}</span>
		</div>
	);
}