import React from 'react'
import { View, Text, Button } from '@tarojs/components'
import Taro from '@tarojs/taro'
import './apply.scss'

const ApplyPage: React.FC = () => {
  const handleApply = () => {
    Taro.navigateTo({ url: '/developer/developer/apply' })
  }

  return (
    <View className="apply-page">
      <View className="apply-page__header">
        <Text className="apply-page__icon">🛠️</Text>
        <Text className="apply-page__title">成为开发者</Text>
        <Text className="apply-page__desc">
          开通开发者权限，您将可以创建项目、开发应用、发布产品等功能
        </Text>
      </View>

      <View className="apply-page__benefits">
        <Text className="apply-page__benefits-title">开发者权益</Text>
        <View className="apply-page__benefit">
          <Text className="apply-page__benefit-icon">📁</Text>
          <View className="apply-page__benefit-info">
            <Text className="apply-page__benefit-name">项目管理</Text>
            <Text className="apply-page__benefit-desc">创建和管理多个项目</Text>
          </View>
        </View>
        <View className="apply-page__benefit">
          <Text className="apply-page__benefit-icon">📱</Text>
          <View className="apply-page__benefit-info">
            <Text className="apply-page__benefit-name">应用开发</Text>
            <Text className="apply-page__benefit-desc">开发、测试和发布应用</Text>
          </View>
        </View>
        <View className="apply-page__benefit">
          <Text className="apply-page__benefit-icon">🔑</Text>
          <View className="apply-page__benefit-info">
            <Text className="apply-page__benefit-name">API Key</Text>
            <Text className="apply-page__benefit-desc">生成和管理 API 凭证</Text>
          </View>
        </View>
        <View className="apply-page__benefit">
          <Text className="apply-page__benefit-icon">📊</Text>
          <View className="apply-page__benefit-info">
            <Text className="apply-page__benefit-name">数据分析</Text>
            <Text className="apply-page__benefit-desc">查看应用使用数据</Text>
          </View>
        </View>
      </View>

      <View className="apply-page__actions">
        <Button className="apply-page__btn" onClick={handleApply}>
          立即申请
        </Button>
      </View>
    </View>
  )
}

export default ApplyPage
