/**
 * Toast stack, rendered through the design system's snackbar skin. The
 * queue lives in the app store so any screen can push to it.
 */
import { SnackbarList } from '@wordpress/components';
import { useApp } from '../store/AppStore';

export default function Toasts() {
	const { toasts, dismissToast } = useApp();

	if ( ! toasts.length ) {
		return null;
	}

	return (
		<SnackbarList
			className="rbfb-toasts"
			notices={ toasts.map( ( toast ) => ( {
				id: String( toast.id ),
				content: toast.message,
				explicitDismiss: toast.status === 'error',
			} ) ) }
			onRemove={ ( id ) => dismissToast( Number( id ) ) }
		/>
	);
}
