import { useMemo } from "react";

import Message from "./Message";
import type { ChatMessage } from "../types";

import "./MessageTyping.scss";

interface MessageTypingProps {
	animation?: "bouncing" | "scaling";
}

export default function MessageTyping({
	animation = "bouncing",
}: MessageTypingProps) {
	const message = useMemo<ChatMessage>(
		() => ({
			id: "typing",
			text: "",
			sender: "bot",
			transparent: true,
		}),
		[],
	);

	return (
		<Message
			message={message}
			className={`chat-message-typing chat-message-typing-animation-${animation}`}
			data-test-id="chat-message-typing"
		>
			<div className="chat-message-typing-body">
				<span className="chat-message-typing-circle" />
				<span className="chat-message-typing-circle" />
				<span className="chat-message-typing-circle" />
			</div>
		</Message>
	);
}