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>
  );
}