import React from 'react';
import ListTimeline from '@dndbeyond/fontawesome-cache/svgs/light/list-timeline.svg';
import { makeStyles } from '../../shared/makeStyles';
import { GameLogNotificationWrapper, NotificationPosition, } from '../GameLogNotificationWrapper';
const useStyles = makeStyles()(({ gameLog: { fontRobotoCondensed } }) => ({
    'gamelog-button': {
        backgroundColor: '#fff',
        border: '2px solid #000',
        borderRadius: '3px',
        padding: '5px 16px 5px 16px',
        fontFamily: fontRobotoCondensed,
        fontStyle: 'normal',
        fontWeight: 'bold',
        fontSize: '13px',
        lineHeight: '15px',
        display: 'flex',
        alignItems: 'center',
        textAlign: 'center',
        textTransform: 'uppercase',
        color: '#000',
    },
    'gamelog-button__icon': {
        margin: '4px 4px 4px 0',
        width: '18px',
        height: '18px',
        padding: '1px 0',
    },
}));
export const GameLogButton = ({ onClick, disabled, gameLogIsVisible, notificationOnClick, }) => {
    const { classes } = useStyles();
    return (React.createElement(GameLogNotificationWrapper, { themeColor: 'currentColor', gameLogIsOpen: gameLogIsVisible, position: NotificationPosition.TOP, notificationOnClick: notificationOnClick },
        React.createElement("button", { className: classes['gamelog-button'], onClick: onClick, disabled: disabled },
            React.createElement(ListTimeline, { className: classes['gamelog-button__icon'] }),
            "Game Log")));
};
//# sourceMappingURL=GameLogButton.js.map