import type { ReactElement } from 'react';
import type { ChatTranscriptMessage } from './use-chat-connection';

interface MessageTranscriptProps {
  messages: ChatTranscriptMessage[];
  streaming: boolean;
  text: string;
}

export function MessageTranscript({
  messages,
  streaming,
  text,
}: MessageTranscriptProps): ReactElement {
  return (
    <div
      role="log"
      aria-live="polite"
      aria-label="Conversation"
      className="flex flex-1 flex-col gap-3 overflow-y-auto p-4"
    >
      {messages.map((message) => (
        <div key={message.id} data-role={message.role} className="whitespace-pre-wrap text-sm">
          <span className="font-medium">{message.role === 'user' ? 'You' : 'Assistant'}: </span>
          <span>{message.text}</span>
          {message.thinking ? (
            <div className="pt-1 text-xs italic opacity-70">{message.thinking}</div>
          ) : null}
        </div>
      ))}
      {streaming ? (
        <div data-role="assistant-streaming" className="whitespace-pre-wrap text-sm">
          <span className="font-medium">Assistant: </span>
          <span>{text || 'Thinking…'}</span>
        </div>
      ) : null}
    </div>
  );
}