// Modal.js

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

const Modal = ({ isOpen, onClose, item }) => {

  const [details, setDetails] = useState(null);

  useEffect(() => {
    if (isOpen && item) {
      const fetchDetails = async () => {
        try {
          const response = await fetch(`https://api.callfi.io/get_user_callouts.php?tag=${item.username}`);
          if (!response.ok) {
            throw new Error('Network response was not ok');
          }
          const data = await response.json();
          setDetails(data);
        } catch (error) {
          console.error('Failed to fetch user details:', error);
        }
      };
      
      fetchDetails();
    }
  }, [isOpen, item]);

  if (!isOpen) return null;

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }} className="fixed inset-0 z-50 flex items-center justify-center overflow-x-hidden overflow-y-auto outline-none focus:outline-none modal-bg" onClick={onClose}>
      <div className="relative w-auto max-w-3xl mx-auto my-6 modal">
        {/* Modal content */}
        <div className="relative flex flex-col border-0 rounded-lg shadow-lg outline-none focus:outline-none">
          {/* Header */}
          <div className="flex items-start justify-between p-5 border-b border-solid rounded-t border-blueGray-200">
            <h3 className="text-3xl font-semibold">{item.username}s Callouts</h3>
            {/* <button
              className="p-1 ml-auto bg-transparent border-0 text-black float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
              onClick={onClose}
            > 
              <span className="bg-transparent text-black h-6 w-6 text-2xl block outline-none focus:outline-none">×</span>
            </button>*/}
          </div>
          {/* Body */}
          <div className="relative p-6 flex-auto">
            <p className={`my-4 text-blueGray-500 text-2xl font-bold leading-relaxed ${
            parseFloat(item.points) > 0 ? 'text-green-500' : 'text-red-500'
          }`}>Total Gains : {parseFloat(item.points).toFixed(2)} x</p>
          </div>
          <div className="relative p-6 flex-auto">
  {details != null ? (
    <div>
      {details.map((detail) => (
        <p
          key={detail.token}
          className={`my-4 text-lg leading-relaxed ${
            parseFloat(detail.gains) > 0 ? 'text-green-500' : 'text-red-400'
          }`}
        >
          {detail.token}: {parseFloat(detail.gains).toFixed(2)}x  [
          {parseFloat(detail.price_at_creation).toFixed(8) + ' => ' + parseFloat(detail.price_now).toFixed(8)}]
        </p>
      ))}
    </div>
  ) : (
    <p>Loading...</p>
  )}
</div>

        </div>
      </div>
    </motion.div>
  );
};

export default Modal;