import { deriveThinkingSummary } from "../../utils/toolCall";
import styles from "./ThinkingBlock.module.css";

interface ThinkingBlockProps {
	content: string;
	streaming?: boolean;
}

export function ThinkingBlock({ content, streaming }: ThinkingBlockProps) {
	const summary = deriveThinkingSummary(content);

	return (
		<details className={styles.block}>
			<summary className={styles.summary}>
				<span className={styles.summaryLabel}>思考</span>
				<span className={styles.summaryText}>{summary}</span>
			</summary>
			<div className={styles.detail}>
				<div className={`${styles.body} ${streaming ? styles.streaming : ""}`}>{content}</div>
			</div>
		</details>
	);
}