import { AnimatePresence, motion } from "framer-motion";
import { ExclamationCircleIcon } from "@heroicons/react/24/outline";

const ANIMATIONS = {
  tooltip: {
    initial: { opacity: 0, y: 10 },
    animate: { opacity: 1, y: 0 },
    exit: { opacity: 0, y: 10 },
    transition: { duration: 0.2 }
  }
};

export default function FormError({ error }: { error: string }) {
  if (!error) return null;
  
  return (
    <div className="group relative">
      <ExclamationCircleIcon className="h-5 w-5 text-red-500" />
      <AnimatePresence>
        <motion.div
          {...ANIMATIONS.tooltip}
          className="absolute bottom-full right-0 mb-2 hidden rounded-md bg-red-50 p-2 text-sm 
                     text-red-500 shadow-lg group-hover:block whitespace-nowrap"
        >
          {error}
          {/* 添加小三角形 */}
          <div className="absolute -bottom-1 right-2 h-2 w-2 rotate-45 bg-red-50" />
        </motion.div>
      </AnimatePresence>
    </div>
  );
}