import { __ } from "@wordpress/i18n";
import type { ConversationDetail } from "../data/types";
import MessageBubble from "./MessageBubble";
import styles from "./ConversationDetail.module.css";

interface Props {
	conversation: ConversationDetail;
}

export default function ConversationDetail({ conversation }: Props) {
	const date = new Date(conversation.createdAt);
	const formattedDate = date.toLocaleDateString(undefined, {
		year: "numeric",
		month: "short",
		day: "numeric",
		hour: "2-digit",
		minute: "2-digit",
	});

	return (
		<>
			<div className={styles.header}>
				<h2 className={styles.title}>{conversation.title}</h2>
				<div className={styles.meta}>
					{__("Guest", "flexible-chat")} &middot; {formattedDate}
				</div>
			</div>
			<div className={styles.messages}>
				{conversation.messages.map((message) => (
					<MessageBubble key={message.id} message={message} />
				))}
			</div>
		</>
	);
}