import { useNavigate } from 'react-router'
import { Button } from 'tdesign-react'

export default function NotFound() {
  const navigate = useNavigate()

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        minHeight: '100vh',
        padding: '2rem',
      }}
    >
      <h1 style={{ fontSize: '6rem', margin: 0, color: 'var(--td-text-color-placeholder)' }}>404</h1>
      <p style={{ fontSize: '1.25rem', color: 'var(--td-text-color-secondary)', marginBottom: '2rem' }}>
        抱歉，您访问的页面不存在。
      </p>
      <Button theme='primary' onClick={() => navigate('/providers')}>
        返回首页
      </Button>
    </div>
  )
}
