import { motion } from "framer-motion";
import { cn } from "@/lib/utils";

type MessageBubbleProps = {
  role: "user" | "bot";
  text: string;
};

export default function MessageBubble({ role, text }: MessageBubbleProps) {
  const isUser = role === "user";
  return (
    <motion.div
      initial={{ opacity: 0, y: 12, scale: 0.98 }}
      animate={{ opacity: 1, y: 0, scale: 1 }}
      exit={{ opacity: 0, y: 12, scale: 0.98 }}
      transition={{ duration: 0.25, ease: "easeOut" }}
      className={cn("flex", isUser ? "justify-end" : "justify-start")}
    >
      <div
        className={cn(
          "max-w-[80%] rounded-2xl px-4 py-3 text-sm leading-6 shadow-md",
          isUser
            ? "bg-sky-500 text-white"
            : "bg-white/8 text-slate-100 border border-white/10 backdrop-blur",
        )}
      >
        {text}
      </div>
    </motion.div>
  );
}
