import { __ } from "@wordpress/i18n";
import styles from "./HistoryPreview.module.css";
import layoutStyles from "./HistoryLayout.module.css";

export default function HistoryPreview() {
	return (
		<div className={styles.historyPreview} aria-hidden="true">
			<aside className={layoutStyles.sidebar}>
				<div className={styles.previewSidebarHeader}>
					<h2 className={layoutStyles.sidebarTitle}>
						{__("Conversations", "flexible-chat")}
					</h2>
					<span className={styles.previewLabel}>
						{__("Example conversation history", "flexible-chat")}
					</span>
				</div>
				<div className={styles.previewConversationActive}>
					<strong>
						{__("Sofa for a small living room", "flexible-chat")}
					</strong>
					<span>
						{__("I need something compact...", "flexible-chat")}
					</span>
				</div>
				<div className={styles.previewConversation}>
					<strong>{__("Delivery options", "flexible-chat")}</strong>
					<span>
						{__("When can it be delivered?", "flexible-chat")}
					</span>
				</div>
				<div className={styles.previewConversation}>
					<strong>
						{__("Caring for an oak table", "flexible-chat")}
					</strong>
					<span>
						{__("How should I protect it?", "flexible-chat")}
					</span>
				</div>
			</aside>
			<main className={layoutStyles.detail}>
				<div className={styles.previewDetailHeader}>
					<h2>
						{__("Sofa for a small living room", "flexible-chat")}
					</h2>
					<span>{__("Guest", "flexible-chat")}</span>
				</div>
				<div className={styles.previewMessages}>
					<p className={styles.previewUserMessage}>
						{__(
							"I need a compact sofa for a small living room.",
							"flexible-chat",
						)}
					</p>
					<p className={styles.previewAssistantMessage}>
						{__(
							"A two-seat sofa with storage works well in smaller spaces. Do you prefer fabric or leather?",
							"flexible-chat",
						)}
					</p>
				</div>
			</main>
		</div>
	);
}