import React, {useEffect, useRef} from "react";
import {Notice} from "@wordpress/components";

const FormNotice = ({
						message,
						onRemove,
						status,
					}: {
	message: string;
	onRemove: () => void;
	status: string;
}) => {
	const targetRef = useRef<HTMLDivElement>(null);

	useEffect(() => {
		// Scroll to element
		if (targetRef.current) {
			targetRef.current.scrollIntoView({
				behavior: "smooth",
				block: "center",
			});
		}
	}, [message]);

	if (!message) {
		return null;
	}

	return (
		<div ref={targetRef}>
			<Notice
				className={"form-notice"}
				status={status as "warning" | "success" | "error" | "info"}
				isDismissible={true}
				onRemove={onRemove}
			>
				{message}
			</Notice>
		</div>
	);
};

export default FormNotice;
