import styles from "./Event.module.css";
import {useState} from "react";
import {Link} from "react-router";
import Button from "/src/components/ui/button/button.jsx"

function Event({event}){
    const [eventMenu, seteventMenu] = useState(false);


    return (
        <div className={`${styles.eventContainer} glassCard`}>
            <div className={styles.eventContent}>
                <div className={`${styles.eventImageDiv}`}>
                    {event.image == null ? (
                        <img src="/src/assets/empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
                    ) : (
                        <img src={`/src/assets/` + event.image + `.png`} alt="Photo de l'événement" />
                    )}
                </div>
                <div>
                    <p className={styles.eventTitle}>{event.name}</p>
                    <p>{event.description}</p>
                    <div className={eventMenu ? styles.eventMenuOpen : styles.eventMenuClose}>
                        <ul>
                            {event.tasks
                                .slice(0,5)
                                .map((task, index) => (
                                <li key={index}> - {task.name}</li>
                            ))}
                        </ul>
                    </div>
                </div>
            </div>
            <div className={styles.eventButtons}>
                <button
                    className={`${styles.moreButton} ${eventMenu ? styles.moreButtonClicked : ""}`}
                    onClick={()=>{seteventMenu(!eventMenu)}}>
                    >
                </button>
                <Link
                    to={`/event/` + event.id}
                    className={eventMenu ? styles.eventMenuOpen : styles.eventMenuClose}>
                    <Button>En savoir plus →</Button>
                </Link>
            </div>
        </div>
    )
}

export default Event;