/* eslint-disable import/no-mutable-exports */
import type { MessageInstance } from 'antd/es/message/interface';
import type { NotificationInstance } from 'antd/es/notification/interface';
import type { ReactNode } from 'react';
import { message as antdMessage, notification as antdNotification } from 'ui/elements';

export let message: Readonly<MessageInstance>;
export let notification: Readonly<NotificationInstance>;

export function Notification({ children }: { children: ReactNode }) {
  const [messageApi, messageContextHolder] = antdMessage.useMessage({
    maxCount: 3,
    top: 70,
  });

  const [notificationApi, notificationContextHolder] = antdNotification.useNotification({
    placement: 'bottomRight',
  });

  message = messageApi;
  notification = notificationApi;

  return (
    <>
      {messageContextHolder}
      {notificationContextHolder}
      {children}
    </>
  );
}