import formatDate from "../../utils/date/formatDate.js";
import formatTime from "../../utils/date/formatTime.js";
import styles from "./NotificationCard.module.css"
import Notification from "../../interfaces/notification.interface";

interface NotificationCardProps {
    notifications: Notification[];
    deleteNotification: (id: string) => void;
}

function NotificationCard({ notifications, deleteNotification }: NotificationCardProps) {
    return (
        notifications.map((notification, index) => (
            <div className={`${styles.notificationCard} glassBorder`} 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>
                    <p className={styles.message}>
                        {notification.data.message}
                    </p>
                </div>
            </div>
        ))
    );
}

export default NotificationCard;