import React from 'react'

interface SettingsModalProps {
  isOpen: boolean
  onClose: () => void
  currentUserId: number | null
  currentUserName: string
  onLogout: () => void
}

export const SettingsModal: React.FC<SettingsModalProps> = ({
  isOpen,
  onClose,
  currentUserId,
  currentUserName,
  onLogout
}) => {
  if (!isOpen) return null

  return (
    <div 
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: 'rgba(0,0,0,0.5)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 1000
      }} 
      onClick={onClose}
    >
      <div 
        style={{
          backgroundColor: '#fff',
          padding: '30px',
          borderRadius: '8px',
          minWidth: '400px',
          maxWidth: '500px',
          boxShadow: '0 4px 12px rgba(0,0,0,0.15)'
        }} 
        onClick={(e) => e.stopPropagation()}
      >
        <h2 style={{ marginTop: 0, marginBottom: '20px', fontSize: '20px', fontWeight: '500' }}>设置</h2>
        <div style={{ marginTop: '20px' }}>
          <div style={{ marginBottom: '15px', paddingBottom: '15px', borderBottom: '1px solid #f0f0f0' }}>
            <div style={{ color: '#999', fontSize: '12px', marginBottom: '5px' }}>用户ID</div>
            <div style={{ color: '#333', fontSize: '14px' }}>{currentUserId || '未知'}</div>
          </div>
          <div style={{ marginBottom: '20px', paddingBottom: '15px', borderBottom: '1px solid #f0f0f0' }}>
            <div style={{ color: '#999', fontSize: '12px', marginBottom: '5px' }}>用户名</div>
            <div style={{ color: '#333', fontSize: '14px' }}>{currentUserName || '未知'}</div>
          </div>
          <button 
            onClick={() => {
              onLogout()
              onClose()
            }}
            style={{
              width: '100%',
              padding: '12px 20px',
              backgroundColor: '#ff3b30',
              color: '#fff',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer',
              fontSize: '14px',
              fontWeight: '500',
              transition: 'background-color 0.2s'
            }}
            onMouseOver={(e) => e.currentTarget.style.backgroundColor = '#ff2d20'}
            onMouseOut={(e) => e.currentTarget.style.backgroundColor = '#ff3b30'}
          >
            退出登录
          </button>
        </div>
      </div>
    </div>
  )
}
