"use client";
/**
 * MessageBubble 消息气泡（容器）
 *
 * 原始 Dart: lib/ui/chat/widgets/message_bubble.dart（52 行）
 *
 * 组成（从左到右）：
 *   - AI：[Avatar] [Content] [占位 spacer]
 *   - 用户：[占位 spacer] [Content] [Avatar]
 */
import { useUserState } from "@/stores/user/user-context";

import { MessageAvatar } from "./message-avatar";
import { MessageContent } from "./message-content";
import styles from "./chat-area.module.css";

export interface MessageBubbleProps {
  content: string;
  imageUrl?: string | null;
  isFromAI: boolean;
}

export function MessageBubble({ content, imageUrl, isFromAI }: MessageBubbleProps) {
  const { avatarUrl } = useUserState();

  if (isFromAI) {
    return (
      <div className={styles.bubbleRowAi} aria-label="AI message">
        <MessageAvatar isFromAI={true} />
        <div style={{ width: 8 }} />
        <MessageContent
          content={content}
          imageUrl={imageUrl}
          isFromAI={true}
        />
        <div style={{ width: 43 }} /> {/* 占位：保持与头像宽度一致 */}
      </div>
    );
  }

  return (
    <div className={styles.bubbleRowUser} aria-label="User message">
      <div style={{ width: 43 }} /> {/* 占位 */}
      <MessageContent content={content} imageUrl={imageUrl} isFromAI={false} />
      <div style={{ width: 8 }} />
      <MessageAvatar isFromAI={false} userAvatarUrl={avatarUrl} />
    </div>
  );
}