import * as React from "react";
import { MessageBar, MessageBarBody, MessageBarTitle } from "@fluentui/react-components";

interface StatusNotifierProps {
    status: "idle" | "success" | "warning" | "error";
    title?: string;
    message?: string;
}

const StatusNotifier: React.FC<StatusNotifierProps> = ({ status, title, message }) => {
    if (status === "idle" || !message) {
        return null;
    }

    return (
        <div style={{ marginTop: "10px", padding: "0 10px" }}>
            <MessageBar intent={status}>
                <MessageBarBody>
                    {title && <MessageBarTitle>{title}</MessageBarTitle>}
                    {message}
                </MessageBarBody>
            </MessageBar>
        </div>
    );
};

export default StatusNotifier;
