import React from 'react'
import { useNavigate } from 'react-router-dom'
import { Card, List, Button, Typography, Descriptions } from 'antd'
import { LeftOutlined } from '@ant-design/icons'
import styles from './About.module.less'

const { Title } = Typography

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

  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <div className={styles.header}>
          <Button
            type="text"
            icon={<LeftOutlined />}
            onClick={() => navigate(-1)}
            style={{ color: 'white' }}
          >
            返回
          </Button>
          <Title level={3} style={{ color: 'white', margin: 0 }}>关于</Title>
          <div style={{ width: 48 }} />
        </div>

        <Card title="项目信息" className={styles.card}>
          <Descriptions column={1}>
            <Descriptions.Item label="版本">1.0.0</Descriptions.Item>
            <Descriptions.Item label="开发者">AnKao Team</Descriptions.Item>
            <Descriptions.Item label="许可证">MIT</Descriptions.Item>
          </Descriptions>
        </Card>

        <Card title="功能特性" className={styles.card}>
          <List
            dataSource={[
              '✅ 响应式设计（支持移动端和PC端）',
              '✅ TypeScript 类型安全',
              '✅ Vite 快速构建',
              '✅ Ant Design 组件库',
              '✅ React Router 路由',
              '✅ API 代理配置',
            ]}
            renderItem={(item) => <List.Item>{item}</List.Item>}
          />
        </Card>

        <Button
          type="primary"
          size="large"
          block
          onClick={() => navigate('/')}
          className={styles.homeButton}
        >
          返回首页
        </Button>
      </div>
    </div>
  )
}

export default About