import { motion } from "framer-motion";

export function MessageBubble({
  role,
  content,
  avatarLetter,
}: {
  role: "bot" | "user";
  content: string;
  avatarLetter?: string;
}) {
  const isBot = role === "bot";
  return (
    <motion.div
      initial={{ opacity: 0, y: 8 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
      className={`flex items-end gap-2 ${isBot ? "" : "flex-row-reverse"}`}
    >
      {isBot && avatarLetter && (
        <div
          className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold"
          style={{
            background: `linear-gradient(135deg, var(--bot-primary), var(--bot-secondary))`,
            color: "var(--bot-text-on-primary)",
          }}
        >
          {avatarLetter}
        </div>
      )}
      <div
        className={`max-w-[80%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed ${
          isBot
            ? "rounded-bl-sm bg-white/10"
            : "rounded-br-sm"
        }`}
        style={
          !isBot
            ? {
                background: "var(--bot-primary)",
                color: "var(--bot-text-on-primary)",
              }
            : undefined
        }
      >
        {content.split("\n").map((line, i) => (
          <span key={i}>
            {line}
            {i < content.split("\n").length - 1 && <br />}
          </span>
        ))}
      </div>
    </motion.div>
  );
}
