import React, { useState } from 'react';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) => ({
    hintContainer: {
        borderLeft: `3px solid ${theme.palette.primary.main}`
    },
    hintContent: {
        backgroundColor: '#F3F9FE',
        padding: `1rem`
    },
    hideHintButton: {
        border: 'none',
        background: 'none',
        cursor: 'pointer',
        color: '#0B79D0',
        textDecoration: 'none'
    },
    hidehelp: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'flex-end',
        width: '100%'
    }
}));
export const HintPanel = ({ hint, hideHintText }) => {
    const theme = useTheme();
    const classes = useStyles(theme);
    const [showHint, setShowHint] = useState(true);
    const handleHideHint = () => {
        setShowHint(false);
    };
    return (React.createElement("div", { className: classes.hintContainer }, showHint && (React.createElement("div", { className: classes.hintContent }, React.createElement("div", null, hint), React.createElement("div", { className: classes.hidehelp }, React.createElement("button", { className: classes.hideHintButton, onClick: handleHideHint }, hideHintText))))));
};
HintPanel.propTypes = {
    hint: PropTypes.string.isRequired, // Hint content to be displayed
    hideHintText: PropTypes.string.isRequired // Text for the hide hint button
};
//# sourceMappingURL=HintPanel.js.map