import {Avatar, ListItem, ListItemAvatar, ListItemText, Typography} from "@mui/material";
import * as React from "react";
import {ReactElement} from "react";

export interface NotificationProps {
    title: string,
    message: string,
    messageSub?: string,
    avatar: ReactElement,
}

function Notification(props: NotificationProps) {

    return (
        <ListItem alignItems="flex-start">
            <ListItemAvatar>
                {props.avatar}
            </ListItemAvatar>
            <ListItemText
                primary={props.title}
                secondary={
                    <React.Fragment>
                        <Typography
                            sx={{display: 'inline'}}
                            component="span"
                            variant="body2"
                            color="text.primary"
                        >
                            {props.message}
                        </Typography>
                        {props.messageSub}
                    </React.Fragment>
                }
            />
        </ListItem>
    );

}

export default Notification;