import React from 'react'
import { render, screen, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom'
import { LogoutButton } from '../../src/components/LogoutButton'

describe('LogoutButton', () => {
  const mockOnPress = jest.fn()

  beforeEach(() => {
    jest.clearAllMocks()
  })

  it('应该渲染退出登录文本', () => {
    render(<LogoutButton onPress={mockOnPress} />)
    expect(screen.getByText('退出登录')).toBeInTheDocument()
  })

  it('应该渲染退出图标', () => {
    const { container } = render(<LogoutButton onPress={mockOnPress} />)
    const icon = container.querySelector('.i-heroicons-arrow-right-on-rectangle-20-solid')
    expect(icon).toBeInTheDocument()
  })

  it('应该应用红色背景样式', () => {
    const { container } = render(<LogoutButton onPress={mockOnPress} />)
    const bgElement = container.querySelector('.bg-red-100')
    expect(bgElement).toBeInTheDocument()
  })

  it('点击时应该调用onPress', () => {
    render(<LogoutButton onPress={mockOnPress} />)

    const button = screen.getByText('退出登录').closest('.flex')
    if (button) {
      fireEvent.click(button)
    }

    expect(mockOnPress).toHaveBeenCalledTimes(1)
  })

  it('正在退出时应该显示"退出中..."', () => {
    render(<LogoutButton onPress={mockOnPress} isLoggingOut={true} />)
    expect(screen.getByText('退出中...')).toBeInTheDocument()
  })

  it('正常状态应该显示"退出登录"', () => {
    render(<LogoutButton onPress={mockOnPress} isLoggingOut={false} />)
    expect(screen.getByText('退出登录')).toBeInTheDocument()
  })
})