//other imports goes here

function App() {
  //states goes here
  const [editingId, setEditingId] = useState<string>(); //add

  useEffect(() => {
    //get user function come here
    return () => {};
  }, [userValue]);

  const handleModalClose = () => {
    //code here
  };

  return (
    <div className=''>
      {/* header JSX goes here */}
      <section className='mt-10 flex justify-center px-6'>
      <ul className='w-full'>
          {users &&
            users.map((user) => (
              <li
                key={user._id}
                className='border-2 p-6 mb-3 rounded-lg flex items-center'
              >
                {/* remaining JSX goes here */}
                <section className=''>
                  {/* remaining JSX goes here */}
                  <div className='flex'>
                    <button className='text-sm text-red-500 capitalize px-4 py-2 mr-4 border border-red-500 rounded-md'
                    >
                      delete
                    </button>
                    <button
                      className='text-sm text-white capitalize px-4 py-2 bg-indigo-900 rounded-md'
                      onClick={() => {
                        setModal(true);
                        setIsEdit(true);
                        setEditingId(user._id); //add this
                      }}
                    >
                      edit
                    </button>
                  </div>
                </section>
              </li>
            ))}
        </ul>
      </section>
      <Modal
        isOpen={modal}
        isEdit={isEdit}
        closeModal={handleModalClose}
        setUserId={setUserId} 
        editingId={editingId} //add 
      />
    </div>
  );
}
export default App;