import { deriveToolCallSummary, formatToolBodyHtml } from "../../utils/toolCall";
import styles from "./ToolCallBlock.module.css";

interface ToolCallBlockProps {
	content: string;
	forceOpen?: boolean;
}

export function ToolCallBlock({ content, forceOpen }: ToolCallBlockProps) {
	const bodyStart = content.indexOf("\n");
	const body = bodyStart >= 0 ? content.slice(bodyStart + 1) : "";
	const hasDiff = body.includes("\n+") || body.includes("\n-") || body.startsWith("+") || body.startsWith("-");

	return (
		<details className={styles.collapsible} open={forceOpen}>
			<summary className={styles.summary}>
				<span className={styles.summaryText}>{deriveToolCallSummary(content)}</span>
			</summary>
			<div className={styles.detail}>
				{hasDiff ? (
					<pre
						className={styles.detailPre}
						dangerouslySetInnerHTML={{ __html: formatToolBodyHtml(body || content) }}
					/>
				) : (
					<pre className={styles.detailPre}>{body || content}</pre>
				)}
			</div>
		</details>
	);
}
