AI Chat Bubble

"use client";

import React, { useState } from "react";
import { cn } from "@/lib/utils";

interface Message {
  id: string;
  role: "user" | "assistant";
  content: string;
  timestamp: Date;
}

interface AIChatBubbleProps {
  message: Message;
  isTyping?: boolean;
}

export default function AIChatBubble({ message, isTyping = false }: AIChatBubbleProps) {
  const isAI = message.role === "assistant";

  return (
    <div className={cn("flex gap-3 mb-4", isAI ? "flex-row" : "flex-row-reverse")}>
      <div className={cn(
        "h-8 w-8 rounded-full flex items-center justify-center text-xs font-bold shrink-0",
        isAI ? "bg-gradient-to-br from-violet-500 to-purple-600 text-white" : "bg-zinc-200 dark:bg-zinc-700 text-zinc-700 dark:text-zinc-200"
      )}>
        {isAI ? "AI" : "U"}
      </div>
      <div className={cn(
        "max-w-[75%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed",
        isAI
          ? "bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 rounded-tl-sm"
          : "bg-blue-600 text-white rounded-tr-sm"
      )}>
        {isTyping ? (
          <div className="flex items-center gap-1 py-1">
            <span className="h-2 w-2 rounded-full bg-zinc-400 animate-bounce" style={{ animationDelay: "0ms" }} />
            <span className="h-2 w-2 rounded-full bg-zinc-400 animate-bounce" style={{ animationDelay: "150ms" }} />
            <span className="h-2 w-2 rounded-full bg-zinc-400 animate-bounce" style={{ animationDelay: "300ms" }} />
          </div>
        ) : (
          <>
            <p>{message.content}</p>
            <p className={cn(
              "text-[10px] mt-1 opacity-60",
              isAI ? "text-zinc-500" : "text-blue-100"
            )}>
              {message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
            </p>
          </>
        )}
      </div>
    </div>
  );
}