import type { ConversationSummary } from "../data/types";
import styles from "./ConversationItem.module.css";

interface Props {
	conversation: ConversationSummary;
	isActive: boolean;
	onSelect: (id: string) => void;
}

export default function ConversationItem({
	conversation,
	isActive,
	onSelect,
}: Props) {
	const className = `${styles.item}${isActive ? ` ${styles.itemActive}` : ""}`;

	return (
		<button
			type="button"
			className={className}
			role="option"
			aria-selected={isActive}
			onClick={() => onSelect(conversation.id)}
		>
			<span className={styles.title}>{conversation.title}</span>
			<span className={styles.preview}>{conversation.preview}</span>
		</button>
	);
}