Untitled

import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { useLoaderData } from 'react-router-dom';
import { UserAuth } from 'path-to-your-auth-provider'; // Update with the correct path

export default function Events() {
  const { t } = useTranslation();
  const events = useLoaderData();
  const [images, setImages] = useState({});
  const [showModal, setShowModal] = useState(false);
  const { user } = UserAuth();

  useEffect(() => {
    const fetchImages = async () => {
      const imageUrls = {};
      for (const event of events) {
        const imageUrl = await getImage(event.id); // Ensure getImage is defined
        imageUrls[event.id] = imageUrl;
      }
      setImages(imageUrls);
    };
    fetchImages();
  }, [events]);

  const handleJoin = (event, e) => {
    e.preventDefault(); // Prevent default action of the link
    if (!user) {
      setShowModal(true);
    } else {
      // Code to join the event
    }
  };

  function Modal({ show, onClose }) {
    if (!show) {
      return null;
    }

    return (
      <div className="modal" style={{opacity: 1, visibility: 'visible', zIndex: 1}}>
        <div className="modal-content">
          <span className="close" onClick={onClose}>&times;</span>
          <p>Please sign up before joining the event.</p>
          <Link to="/signup">Sign Up</Link>
        </div>
      </div>
    );
  }

  return (
    <div>
      {events.map(event => (
        <Link to={event.id.toString()} key={event.id}>
          <button 
            type="button" 
            className="btn btn-outline-dark btn-lg"
            onClick={(e) => handleJoin(event, e)}
          >
            <i className="fa-regular fa-address-card"></i> {t('join_event')}
          </button>
        </Link>
      ))}
      <Modal show={showModal} onClose={() => setShowModal(false)} />
    </div>
  );
}