"use client";

import type { ChatMessage } from "@/lib/types";

interface MessageProps {
  message: ChatMessage;
  isStreaming?: boolean;
  isLastInGroup?: boolean;
}

export function Message({ message, isStreaming, isLastInGroup }: MessageProps) {
  const isUser = message.role === "user";

  return (
    <div
      className={`flex ${isUser ? "justify-end" : "justify-start"} ${
        isLastInGroup ? "mb-4" : "mb-1"
      }`}
    >
      <div
        className={`max-w-[80%] px-4 py-2.5 rounded-2xl text-[15px] leading-relaxed ${
          isUser
            ? "bg-bg-elevated text-text rounded-br-md"
            : "text-text rounded-bl-md"
        }`}
      >
        <div className="whitespace-pre-wrap break-words">
          {message.content}
          {isStreaming && (
            <span className="inline-block w-[2px] h-[1.1em] bg-accent ml-0.5 align-text-bottom animate-pulse" />
          )}
        </div>
      </div>
    </div>
  );
}