import { useMemo } from "react";

import MarkdownIt from "markdown-it";
import markdownLink from "markdown-it-link-attributes";

import type { Message } from "../data/types";
import ToolCallBadge from "./ToolCallBadge";
import styles from "./MessageBubble.module.css";

const markdown = new MarkdownIt();

markdown.use(markdownLink, {
	attrs: {
		target: "_blank",
		rel: "noopener",
	},
});

interface Props {
	message: Message;
}

export default function MessageBubble({ message }: Props) {
	const isUser = message.role === "user";
	const roleClass = isUser ? styles.user : styles.assistant;

	const contentHtml = useMemo(
		() => markdown.render(message.content),
		[message.content],
	);

	return (
		<div className={`${styles.message} ${roleClass}`}>
			<div className={styles.bubble}>
				<span dangerouslySetInnerHTML={{ __html: contentHtml }} />
			</div>
			{!isUser && message.toolCalls && message.toolCalls.length > 0 && (
				<div className={styles.toolCalls}>
					{message.toolCalls.map((toolCall, index) => (
						<ToolCallBadge
							key={`${toolCall.name}-${index}`}
							toolCall={toolCall}
						/>
					))}
				</div>
			)}
		</div>
	);
}