"use client";

import { Bot, UserRound } from "lucide-react";
import type { ChatMessage } from "@/lib/h5MockQa";

export default function ChatBubble({ message }: { message: ChatMessage }) {
  const isUser = message.role === "user";

  return (
    <div className={`flex gap-2 ${isUser ? "justify-end" : "justify-start"}`}>
      {!isUser ? (
        <div className="mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-jade text-white">
          <Bot className="h-4 w-4" aria-hidden />
        </div>
      ) : null}
      <div className={`max-w-[82%] ${isUser ? "items-end" : "items-start"}`}>
        <div
          className={`rounded-[14px] px-4 py-3 text-[15px] leading-7 shadow-sm ${
            isUser ? "rounded-tr-md bg-jade text-white" : "rounded-tl-md border border-line bg-white text-ink"
          }`}
        >
          <div className="whitespace-pre-wrap">{message.content}</div>
          {message.source ? (
            <div className={`mt-3 border-t pt-2 text-xs ${isUser ? "border-white/25 text-teal-50" : "border-line text-slate-500"}`}>
              来源：{message.source}
            </div>
          ) : null}
          {message.boundary ? (
            <div className="mt-3 rounded-md bg-amber-50 px-3 py-2 text-xs leading-5 text-amber-800">{message.boundary}</div>
          ) : null}
        </div>
        <div className={`mt-1 text-xs text-slate-400 ${isUser ? "text-right" : "text-left"}`}>{message.createdAt}</div>
      </div>
      {isUser ? (
        <div className="mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-slate-200 text-slate-600">
          <UserRound className="h-4 w-4" aria-hidden />
        </div>
      ) : null}
    </div>
  );
}