// @ts-nocheck - WordPress notices store types

import { SnackbarList } from '@wordpress/components';
import { useDispatch, useSelect } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';

export default function Notice() {
	const notices = useSelect( ( select ) => {
		const noticeSelect = select( noticesStore );
		// @ts-ignore - WordPress notices store types
		return noticeSelect
			.getNotices()
			.filter( ( notice: any ) => notice.type === 'snackbar' )
			.map( ( notice: any ) => ( {
				...notice,
				// Add status-based class to each notice
				className: `gs-snackbar-${ notice.status }`,
			} ) );
	}, [] );
	const { removeNotice } = useDispatch( noticesStore );

	return (
		<SnackbarList
			notices={ notices }
			className="gs-snackbar-list"
			onRemove={ removeNotice }
		/>
	);
}