import { Layout, theme } from 'antd'
import { Outlet } from 'react-router-dom'

export default function AuthLayout() {
  const { token } = theme.useToken()

  return (
    <Layout
      style={{
        minHeight: '100vh',
        background: `
          radial-gradient(800px 500px at 15% 10%, ${token.colorPrimaryBg} 0%, transparent 55%),
          radial-gradient(900px 500px at 100% 0%, rgba(5,170,129,0.10) 0%, transparent 52%),
          linear-gradient(180deg, #f8fbf8 0%, #f1f5f2 100%)
        `,
      }}
    >
      <Layout.Content
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          padding: 20,
        }}
      >
        <div style={{ width: 420, maxWidth: '100%' }}>
          <Outlet />
        </div>
      </Layout.Content>
    </Layout>
  )
}