import React from 'react';
import { View } from '@tarojs/components';
import MarkdownRenderer from './MarkdownRenderer';

/**
 * Markdown渲染器测试组件
 */
const MarkdownTest: React.FC = () => {
  const testContent = `# AI助手功能介绍

## 主要功能
- **智能问答**: 回答各种问题
- **代码解释**: 解释代码逻辑  
- **文档生成**: 生成技术文档

## 代码示例
\`\`\`javascript
function greet(name) {
  return \`Hello, \${name}!\`;
}

const result = greet("World");
console.log(result);
\`\`\`

## 文本格式
这是**粗体文本**，这是*斜体文本*，这是\`行内代码\`。

## 列表示例
### 无序列表
- 第一项
- 第二项
- 第三项

### 有序列表
1. 步骤一
2. 步骤二
3. 步骤三

## 引用示例
> 这是一个引用块
> 可以包含多行内容
> 用于强调重要信息

## 链接示例
请访问 [官方网站](https://example.com) 获取更多信息。

## 混合内容
在编程中，我们经常使用 \`console.log()\` 来调试代码：

\`\`\`python
def hello_world():
    print("Hello, World!")
    return True

if __name__ == "__main__":
    hello_world()
\`\`\`

> **提示**: 记得在生产环境中移除调试代码！`;

  return (
    <View style={{ padding: '20px', backgroundColor: '#f5f5f5' }}>
      <View style={{ marginBottom: '20px' }}>
        <View style={{ 
          backgroundColor: '#fff', 
          padding: '15px', 
          borderRadius: '8px',
          boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
        }}>
          <View style={{ 
            fontSize: '18px', 
            fontWeight: 'bold', 
            marginBottom: '10px',
            color: '#333'
          }}>
            AI消息样式预览
          </View>
          <MarkdownRenderer 
            content={testContent}
            className="ai-markdown"
          />
        </View>
      </View>

      <View>
        <View style={{ 
          background: 'linear-gradient(135deg, #ff3535 0%, #FF0000 100%)',
          color: 'white',
          padding: '15px', 
          borderRadius: '8px'
        }}>
          <View style={{ 
            fontSize: '18px', 
            fontWeight: 'bold', 
            marginBottom: '10px',
            color: '#fff'
          }}>
            用户消息样式预览
          </View>
          <MarkdownRenderer 
            content={testContent}
            className="user-markdown"
          />
        </View>
      </View>
    </View>
  );
};

export default MarkdownTest;
