import { Button } from '@heroui/button';
import { Code } from '@heroui/code';
import { MdError } from 'react-icons/md';

export interface ErrorFallbackProps {
  error: Error
  resetErrorBoundary: () => void
}
function errorFallbackRender ({
  error,
  resetErrorBoundary,
}: ErrorFallbackProps) {
  return (
    <div className='pt-32 flex flex-col justify-center items-center'>
      <div className='flex items-center'>
        <MdError className='mr-2' color='red' size={30} />
        <h1 className='text-2xl'>出错了</h1>
      </div>
      <div className='my-6 flex flex-col justify-center items-center'>
        <p className='mb-2'>错误信息</p>
        <Code>{error.message}</Code>
      </div>
      <Button color='primary' size='md' onPress={resetErrorBoundary}>
        重试
      </Button>
    </div>
  );
}

export default errorFallbackRender;