import React, {useEffect, useState} from "react";
import getEventById from "../../utils/event/getEventById.js";
import styles from "./Task.module.css";
import formatDate from "../../utils/date/formatDate.js";

const Task = ({ task }) => {
    const [event, setEvent] = useState(null);

    useEffect(() => {
        (async () => {
            const e = await getEventById(task.id);
            setEvent(e);
        }) ()
    }, [])

    return (
        <div className={`${styles.task} glassCard`}>
            <div className={styles.content}>
                <div>
                    <h2> {event && event.name} - {task.name}</h2>
                    <p className={styles.desc}> {task.description} </p>
                    <p className={styles.date}> {formatDate(task.start)} </p>
                </div>
            </div>
        </div>
    );
}

export default Task;