import { Card, Row, Col, Typography, Space } from 'antd'
import { Link } from 'react-router-dom'
import { RobotOutlined, TranslationOutlined, FileTextOutlined, EditOutlined } from '@ant-design/icons'

const { Title, Paragraph } = Typography

const cards = [
  {
    title: '测试页面 1',
    description: 'Dify AI Agent 集成示例',
    icon: <RobotOutlined style={{ fontSize: 32, color: '#1890ff' }} />,
    link: '/test1'
  },
  {
    title: '测试页面 2',
    description: '功能开发中...',
    icon: <FileTextOutlined style={{ fontSize: 32, color: '#52c41a' }} />,
    link: '/test2'
  },
  {
    title: '中英翻译器',
    description: 'AI 驱动的翻译工具',
    icon: <TranslationOutlined style={{ fontSize: 32, color: '#722ed1' }} />,
    link: '/zh-en-translator'
  },
  {
    title: '错别字检测',
    description: '智能检测和纠正中文文本中的错别字',
    icon: <EditOutlined style={{ fontSize: 32, color: '#fa8c16' }} />,
    link: '/spell-check'
  },
  {
    title: '错别字检测与修正系统',
    description: '更智能的错别字检测与修正系统，支持分类和建议',
    icon: <EditOutlined style={{ fontSize: 32, color: '#13c2c2' }} />,
    link: '/spell-check-system'
  }
]

const HomePage: React.FC = () => {
  return (
    <div style={{ padding: 24 }}>
      <Title level={2}>欢迎使用 AI 办公助手</Title>
      <Paragraph style={{ marginBottom: 32 }}>
        选择下方功能开始使用，或通过顶部导航访问其他页面。
      </Paragraph>

      <Row gutter={[16, 16]}>
        {cards.map((card, index) => (
          <Col xs={24} sm={12} md={8} key={index}>
            <Link to={card.link}>
              <Card hoverable style={{ height: '100%' }}>
                <Space direction='vertical' align='center' style={{ width: '100%' }}>
                  {card.icon}
                  <Title level={4} style={{ marginBottom: 0 }}>{card.title}</Title>
                  <Paragraph type='secondary' style={{ marginBottom: 0 }}>
                    {card.description}
                  </Paragraph>
                </Space>
              </Card>
            </Link>
          </Col>
        ))}
      </Row>
    </div>
  )
}

export default HomePage