import React, { Suspense } from 'react';

import dynamic from 'next/dynamic';
import { useTranslation } from 'react-i18next';

import ItemsTreeContentSkeleton from '../../ItemsTree/ItemsTreeContentSkeleton';

const InAppNotificationSubstance = dynamic(() => import('./InAppNotificationSubstance').then(mod => mod.InAppNotificationSubstance), { ssr: false });

export const InAppNotification = (): JSX.Element => {
  const { t } = useTranslation();
  return (
    <div className="px-3">
      <div className="grw-sidebar-content-header py-3 d-flex">
        <h3 className="mb-0">
          {t('In-App Notification')}
        </h3>
      </div>

      <Suspense fallback={<ItemsTreeContentSkeleton />}>
        <InAppNotificationSubstance />
      </Suspense>
    </div>
  );
};