import { useAppStore } from "../stores/app-store";

export function PreviewBox() {
	const text = useAppStore((s) => s.previewText);
	const active = useAppStore((s) => s.previewActive);
	const weakNetwork = useAppStore((s) => s.weakNetwork);
	const recording = useAppStore((s) => s.recording);
	const hasText = text.length > 0;
	const placeholder =
		weakNetwork && recording ? "网络波动中，音频缓冲后发送…" : "按住说话…";

	return (
		<section className="shrink-0 pb-3">
			<div
				className={`scrollbar-thin max-h-40 min-h-20 overflow-y-auto rounded-card border px-[18px] py-4 transition-all duration-300 ${
					active
						? "border-accent/40 bg-linear-to-b from-accent/[0.03] to-surface shadow-[0_0_0_1px_rgba(99,102,241,0.2),0_4px_24px_-4px_rgba(99,102,241,0.15)]"
						: "border-edge bg-surface"
				}`}
			>
				<p
					className={`break-words text-base leading-relaxed ${hasText ? "" : "text-fg-dim"}`}
				>
					{hasText ? text : placeholder}
				</p>
			</div>
		</section>
	);
}