import React from 'react'
import { useNavigate } from 'react-router-dom'
import { NavBar, Card, List, Space, Button } from 'antd-mobile'
import styles from './About.module.less'

const About: React.FC = () => {
  const navigate = useNavigate()

  return (
    <div className={styles.container}>
      <NavBar onBack={() => navigate(-1)}>关于</NavBar>

      <div className={styles.content}>
        <Card title="项目信息">
          <Space direction="vertical" block>
            <List>
              <List.Item extra="1.0.0">版本</List.Item>
              <List.Item extra="AnKao Team">开发者</List.Item>
              <List.Item extra="MIT">许可证</List.Item>
            </List>

            <Card title="功能特性">
              <List>
                <List.Item>✅ 响应式移动端设计</List.Item>
                <List.Item>✅ TypeScript 类型安全</List.Item>
                <List.Item>✅ Vite 快速构建</List.Item>
                <List.Item>✅ antd-mobile 组件库</List.Item>
                <List.Item>✅ React Router 路由</List.Item>
                <List.Item>✅ API 代理配置</List.Item>
              </List>
            </Card>

            <Button
              color="primary"
              size="large"
              block
              onClick={() => navigate('/')}
            >
              返回首页
            </Button>
          </Space>
        </Card>
      </div>
    </div>
  )
}

export default About