import {Action, actionClosedMessageBanner} from "./state/action.ts";
import styles from "./message-banner.module.css";
import {State} from "./state/state.ts";
import {ActionDispatch} from "react";

export default function MessageBanner({state, dispatch}:
                                      {
                                          state: State;
                                          dispatch: ActionDispatch<[Action]>
                                      }) {
    function handleClose() {
        dispatch(actionClosedMessageBanner());
    }

    if (!!state.errorMessage) {
        return (
            <div className={styles.banner + " " + styles.message}>
                {state.errorMessage}
                <button onClick={handleClose}>Dismiss message</button>
            </div>
        );
    }
    return (<div className={styles.banner + " " + styles.empty}></div>);
}