"use client";

import { motion, AnimatePresence } from "framer-motion";

interface ToastProps {
  message: string;
  position?: "top" | "bottom";
}

const positionClass = {
  top: "top-10",
  bottom: "bottom-8",
};

export default function Toast({ message, position = "top" }: ToastProps) {
  const isTop = position === "top";
  const y = isTop ? -12 : 12;

  return (
    <AnimatePresence>
      {message && (
        <motion.div
          className={`fixed left-1/2 z-60 -translate-x-1/2 rounded-xl bg-elevated px-4 py-2.5 text-xs font-medium text-heading shadow-lg ring-1 ring-subtle ${positionClass[position]}`}
          initial={{ opacity: 0, y, x: "-50%" }}
          animate={{ opacity: 1, y: 0, x: "-50%" }}
          exit={{ opacity: 0, y, x: "-50%" }}
          transition={{ type: "spring", stiffness: 400, damping: 25 }}
        >
          {message}
        </motion.div>
      )}
    </AnimatePresence>
  );
}