'use client';

import { ErrorBoundary } from '@sentry/nextjs';

import Button, { ButtonSize, ButtonVariant } from '@/components/button/Button';

const ModalErrorBoundary = ({ children }: { children: React.ReactNode }) => {
  return (
    <ErrorBoundary
      fallback={({ error }) => (
        <div className='flex h-full w-full flex-col items-center justify-center gap-4'>
          An error occured. Please try again.
          <Button
            onClick={() =>
              typeof window !== 'undefined' && window.location.reload()
            }
            variant={ButtonVariant.Standard}
            size={ButtonSize.Medium}
            className='rounded px-4 py-2'
          >
            Retry
          </Button>
          <pre className='text-foreground mx-10 max-h-[50vh] min-h-[200px] max-w-full min-w-[300px] overflow-y-auto rounded-md bg-gray-100 p-4 text-xs whitespace-pre-wrap'>
            ERROR INFO:{'\n\n'}
            Message: {(error as any)?.message ?? '[No Error Message]'}
          </pre>
        </div>
      )}
    >
      {children}
    </ErrorBoundary>
  );
};

export default ModalErrorBoundary;