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

const CalloutModal = ({ isOpen, onClose, item, onSubmit }) => {
  const [tokenId, setTokenId] = useState('');

  const handleTokenChange = (e) => {
    setTokenId(e.target.value);
  };

  const handleSubmit = () => {
    onSubmit(tokenId);
    onClose();
  };

  return isOpen ? (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 modal-bg"
    >
      <div className="bg-white p-4 rounded shadow-lg w-11/12 max-w-md modal">
      
        <div className="flex items-start">
            <h2 className="text-xl font-bold mb-2">Make a new call!</h2>
            <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-white h-10 w-6 text-2xl block outline-none focus:outline-none">x</span>
            </button>

        </div>
        
        <p className="text-lg mb-4">Type in a tokens short code, that you will think boom anytime soon</p>
        <input
          type="text"
          value={tokenId}
          onChange={handleTokenChange}
          className="w-full p-2 mb-4 border rounded glassmorphism"
          placeholder="Enter token short code"
        />
        <button
          onClick={handleSubmit}
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full glassmorphism"
        >
          Submit
        </button>
      </div>
    </motion.div>
  ) : null;
};

export default CalloutModal;