src/components/lessons/KeyTermBadge.jsx

import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

export default function KeyTermBadge({ term, definition, color = "cyan" }) {
  const [showDefinition, setShowDefinition] = useState(false);

  const colors = {
    cyan: "bg-cyan-500/20 text-cyan-300 border-cyan-500/30 hover:bg-cyan-500/30",
    purple: "bg-purple-500/20 text-purple-300 border-purple-500/30 hover:bg-purple-500/30",
    pink: "bg-pink-500/20 text-pink-300 border-pink-500/30 hover:bg-pink-500/30",
    green: "bg-emerald-500/20 text-emerald-300 border-emerald-500/30 hover:bg-emerald-500/30",
    yellow: "bg-yellow-500/20 text-yellow-300 border-yellow-500/30 hover:bg-yellow-500/30"
  };

  return (
    <span className="relative inline-block">
      <motion.button
        className={`px-3 py-1 rounded-lg border ${colors[color]} font-semibold text-sm transition-colors cursor-pointer`}
        onClick={() => setShowDefinition(!showDefinition)}
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.95 }}
      >
        {term}
      </motion.button>
      
      <AnimatePresence>
        {showDefinition && (
          <motion.div
            initial={{ opacity: 0, y: 10, scale: 0.9 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 10, scale: 0.9 }}
            className="absolute z-50 left-0 top-full mt-2 p-3 rounded-xl bg-slate-800 border border-white/20 shadow-xl min-w-[200px] max-w-[300px]"
          >
            <p className="text-white/90 text-sm">{definition}</p>
            <div className="absolute -top-2 left-4 w-4 h-4 bg-slate-800 border-l border-t border-white/20 transform rotate-45" />
          </motion.div>
        )}
      </AnimatePresence>
    </span>
  );
}