import React, { useState } from 'react';
import { Card, CardBody, CardHeader } from '@nextui-org/card'; // Adjust the import path as necessary
import { motion, AnimatePresence } from 'framer-motion';

const PopoverPreview: React.FC = () => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div className="relative inline-block">
      <motion.span
        className="mt-10 inline-flex h-full items-center justify-center rounded-full bg-gradient-to-t from-indigo-600 to-indigo-800 border-1 border-indigo-600 bg-opacity-25 shadow-xl px-3 py-1 text-xs font-medium text-gray-300 cursor-pointer"
        onHoverStart={() => setIsHovered(true)}
        onHoverEnd={() => setIsHovered(false)}
      >
        Hover Me
      </motion.span>
      <AnimatePresence>
        {isHovered && (
          <motion.div
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            transition={{ duration: 0.3 }}
            className="absolute top-full transform mt-2 w-72 z-10"
          >
            <Card className="rounded-xl shadow-lg bg-gradient-to-t from-indigo-600 to-indigo-800 border-1 border-indigo-600 z-50 bg-opacity-25">
              <CardHeader>
                <h1 className="font-medium text-lg">Eternity UI on top</h1>
              </CardHeader>
              <CardBody>
                <img
                  src="https://i.ibb.co/wNdHZzs/image.png"
                  className="rounded-xl"
                  alt="Eternity UI"
                />
              </CardBody>
            </Card>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
};

export default PopoverPreview;