"use client";

import { AnimatePresence, motion } from "framer-motion";
import { cn } from "@/lib/utils";
import type { CalculationState } from "@/lib/visualizations/types";

interface CalculationBubbleProps {
  calculation: CalculationState | null;
  className?: string;
}

export function CalculationBubble({
  calculation,
  className,
}: CalculationBubbleProps) {
  return (
    <AnimatePresence>
      {calculation && (
        <motion.div
          initial={{ opacity: 0, scale: 0.8, y: 10 }}
          animate={{ opacity: 1, scale: 1, y: 0 }}
          exit={{ opacity: 0, scale: 0.8, y: -10 }}
          transition={{ duration: 0.25, ease: "easeOut" }}
          className={cn(
            "inline-flex items-center gap-2 rounded-lg border border-[var(--primary)]/40 bg-[var(--primary)]/10 px-3 py-2 font-mono text-sm",
            className
          )}
        >
          <span className="text-[var(--muted-foreground)]">{calculation.expression}</span>
          <span className="text-[var(--primary)]">=</span>
          <span className="font-semibold text-[var(--primary)]">{calculation.result}</span>
        </motion.div>
      )}
    </AnimatePresence>
  );
}