"use client";

import { AnimatePresence, motion } from "framer-motion";
import { cn } from "@/shared/utils";

type Tone = "info" | "success" | "warning" | "error";

interface InlineToastProps {
  visible: boolean;
  text: string;
  tone?: Tone;
  className?: string;
}

export function InlineToast({ visible, text, tone = "info", className = "" }: InlineToastProps) {
  const toneClasses = {
    success: "bg-success-bg border-success-border text-success",
    warning: "bg-warning-bg border-warning-border text-warning",
    error: "bg-danger-bg border-danger-border text-danger",
    info: "bg-info-bg border-info-border text-info",
  }[tone];

  return (
    <AnimatePresence>
      {visible && (
        <motion.div
          className={cn("fixed bottom-6 right-6 z-50", className)}
          initial={{ opacity: 0, x: "100%", scale: 0.9 }}
          animate={{ opacity: 1, x: 0, scale: 1 }}
          exit={{ opacity: 0, x: "100%", scale: 0.9 }}
          transition={{ duration: 0.3, ease: [0.175, 0.885, 0.32, 1.275] }}
        >
          <div
            className={cn(
              "flex items-center gap-2 rounded-lg border px-4 py-3 shadow-lg min-w-[240px] text-sm font-medium",
              toneClasses
            )}
          >
            <span>{text}</span>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}
