import styles from "./Event.module.css";
import { useNavigate } from "react-router";
import Button from "/src/components/ui/Button/Button"

function Event({event}){

    const navigate = useNavigate();

    const handleNavigate = () => navigate(`/events/` + event.id);

    return (
        <div className={`${styles.eventContainer} glassCard`} onClick={handleNavigate}>
            <div className={styles.eventContainerTop}>
                <div className={styles.eventContent}>
                    <div className={`${styles.eventImageDiv}`}>
                        {event.image == null ? (
                            <img src="/empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
                        ) : (
                            <img src={event.image + `.png`} alt="Photo de l'événement" />
                        )}
                    </div>
                    <div className={styles.eventInfos}>
                        <p className={styles.eventTitle}>{event.name}</p>
                        <p>{event.description}</p>
                    </div>
                </div>
                <Button onClick={handleNavigate} className={styles.openBtn}>Voir plus</Button>
            </div>
        </div>
    )
}

export default Event;