import formatDate from "../../utils/date/formatDate.js";
import formatTime from "../../utils/date/formatTime.js";

import styles from "./NotificationCard.module.css"


function NotificationCard({notifications, deleteNotification}) {
    return (
        notifications.map((notification, index) => (
            <div className={styles.notificationCard} key={index}>
                <div className={styles.cardHeader}>
                    <span className={styles.timeTag}>
                        Le {formatDate(notification.created_at)} à {formatTime(notification.created_at)}
                    </span>
                    <button
                        className={styles.closeIconButton}
                        onClick={() => deleteNotification(notification.id)}
                        title="Supprimer"
                    >
                        ✕
                    </button>
                </div>

                <div className={styles.cardContent}>
                    <p className={styles.message}>
                        {notification.content}
                    </p>
                </div>
            </div>
        ))
    );
}

export default NotificationCard;