import { useState } from 'react'
import { Spin } from 'antd'

function OpenClawPage() {
  const [loading, setLoading] = useState(true)

  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
      {loading && (
        <div
          style={{
            position: 'absolute',
            inset: 0,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: '#0f1117',
            zIndex: 1,
          }}
        >
          <Spin size="large" tip="正在加载 AI 助手..." />
        </div>
      )}
      <iframe
        src="/openclaw/"
        title="OpenClaw"
        onLoad={() => setLoading(false)}
        style={{
          position: 'absolute',
          inset: 0,
          width: '100%',
          height: '100%',
          border: 'none',
          backgroundColor: '#0f1117',
        }}
      />
    </div>
  )
}

export default OpenClawPage
