import React from 'react'
import { View, Text } from '@tarojs/components'

interface LogoutButtonProps {
  /** 点击处理函数 */
  onPress: () => void
  /** 是否正在退出 */
  isLoggingOut?: boolean
}

/**
 * 退出登录按钮组件
 * 红色图标背景
 * 原型参考: docs/小程序原型/rencai.html (行770-906)
 */
export const LogoutButton: React.FC<LogoutButtonProps> = ({
  onPress,
  isLoggingOut = false
}) => {
  return (
    <View className="bg-white mb-6">
      <View
        className="flex flex-row items-center p-3 rounded-lg hover:bg-gray-50"
        onClick={onPress}
      >
        {/* 红色退出图标 */}
        <View className="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
          <View className="i-heroicons-arrow-right-on-rectangle-20-solid w-5 h-5 text-red-500" />
        </View>

        {/* 退出登录文本 */}
        <Text className="text-gray-700 text-sm">
          {isLoggingOut ? '退出中...' : '退出登录'}
        </Text>
      </View>
    </View>
  )
}
