/*
 * Runtime Web – Unified Serverless Framework for Full-Stack TypeScript Applications
 * Documentation: https://runtimeweb.com/docs/getting-started
 *
 * @template: ai-chat
 */

/**
 * MessageItem Component
 *
 * Thin wrapper around MessageBubble that adds entrance animation.
 * Renders a single message in the chat conversation with role-based styling.
 * User messages are styled differently from assistant messages.
 *
 * @requirements 2.4, 2.5
 *
 * @example
 * <MessageItem message={{ id: '1', role: 'user', content: 'Hello', timestamp: '2025-01-01T12:00:00Z' }} />
 */

import * as React from 'react';
import { MessageBubble } from './MessageBubble';
import type { Message } from '../../types';

/**
 * Props for the MessageItem component.
 */
export interface MessageItemProps {
    /** The message to render */
    message: Message;
}

/**
 * MessageItem component displays a single chat message with entrance animation.
 *
 * Features:
 * - Delegates rendering to MessageBubble for role-based styling
 * - Adds entrance animation (fade-in + slide-up) via message-enter class
 * - Visual distinction between user and assistant messages
 * - Avatar display for assistant messages
 * - Timestamp display for each message
 * - Streaming indicator for in-progress assistant responses
 * - Markdown support for assistant messages
 *
 * Validates:
 * - Requirement 2.4: New messages animate into view with smooth fade-in and slide-up transition
 * - Requirement 2.5: Support markdown rendering for assistant messages (via MessageBubble)
 *
 * @param props - Component props containing the message to render
 * @returns React element representing the animated message item
 */
export const MessageItem: React.FC<MessageItemProps> = ({ message }) => {
    return (
        <div
            className="message-item message-enter"
            data-role={message.role}
            data-message-id={message.id}
        >
            <MessageBubble message={message} showAvatar={true} />
        </div>
    );
};
