import React from 'react';
import { makeStyles, Paper, CardContent, Typography } from '@material-ui/core';
import { AvatarAlphabet } from '../AvatarAlphabet';
import { FluentIconButton } from '../../inputs/buttons/FluentIconButton';
import { DeleteIcon } from '@fluentui/react-icons';
import { TrimForAvatar } from '../../../utilities/TrimForAvatar';
import TimeAgo from 'timeago-react';
import clsx from 'clsx';
const useStyles = makeStyles((theme) => ({
    root: {
        width: '100%',
        display: 'flex'
    },
    avatar: {
        marginRight: theme.spacing(2)
    },
    message: {
        width: '100%'
    },
    noteWrapper: {
        display: 'flex'
    },
    note: {
        flex: 1
    },
    date: {
        marginTop: theme.spacing(2)
    }
}));
export const Note = ({ children, author, date, className, onClick }) => {
    const classes = useStyles();
    return (React.createElement("div", { className: clsx(classes.root, className) }, React.createElement("div", { className: classes.avatar }, React.createElement(AvatarAlphabet, { avatarCharacter: TrimForAvatar(author) })), React.createElement(Paper, { elevation: 0, className: classes.message }, React.createElement(CardContent, null, React.createElement("div", { className: classes.noteWrapper }, React.createElement(Typography, { variant: "body2", className: classes.note }, children), React.createElement("div", null, React.createElement(FluentIconButton, { color: "primary", icon: DeleteIcon, onClick: onClick }))), React.createElement("div", { className: classes.date }, React.createElement(Typography, { variant: "caption" }, React.createElement(TimeAgo, { datetime: date })))))));
};
//# sourceMappingURL=Note.js.map