import { Button, Result } from 'antd'
import type { FallbackProps } from 'react-error-boundary'

interface ErrorStateProps {
  title?: string
  message?: string
  onRetry?: () => void
}

export function ErrorState({
  title = '加载失败',
  message,
  onRetry,
}: ErrorStateProps) {
  return (
    <div className="flex items-center justify-center min-h-[200px] p-8">
      <Result
        status="error"
        title={title}
        subTitle={message}
        extra={
          onRetry ? (
            <Button type="primary" onClick={onRetry}>
              重试
            </Button>
          ) : undefined
        }
      />
    </div>
  )
}

export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
  return (
    <div className="flex items-center justify-center min-h-[200px] p-8">
      <Result
        status="error"
        title="页面出现错误"
        subTitle={error.message}
        extra={
          <div className="flex gap-2">
            <Button onClick={resetErrorBoundary}>重试</Button>
            <Button type="primary" onClick={() => window.location.reload()}>
              刷新页面
            </Button>
          </div>
        }
      />
    </div>
  )
}