import { useEffect, useRef } from 'react'

function UserDropdown({ show, onClose, onProfile, onApiKey, onAdmin, onHelp, onLogout }) {
  const dropdownRef = useRef(null)

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
        onClose()
      }
    }

    if (show) {
      document.addEventListener('mousedown', handleClickOutside)
    }

    return () => {
      document.removeEventListener('mousedown', handleClickOutside)
    }
  }, [show, onClose])

  if (!show) return null

  return (
    <div className="user-dropdown" ref={dropdownRef}>
      <div className="dropdown-item" onClick={onProfile}>
        <span className="dropdown-icon">👤</span>
        <span>个人信息</span>
      </div>
      <div className="dropdown-item" onClick={onApiKey}>
        <span className="dropdown-icon">🔑</span>
        <span>API Key</span>
      </div>
      <div className="dropdown-item" onClick={onAdmin}>
        <span className="dropdown-icon">⚙️</span>
        <span>后台管理</span>
      </div>
      <div className="dropdown-item" onClick={onHelp}>
        <span className="dropdown-icon">📖</span>
        <span>使用说明</span>
      </div>
      <div className="dropdown-divider"></div>
      <div className="dropdown-item logout" onClick={onLogout}>
        <span className="dropdown-icon">🚪</span>
        <span>退出登录</span>
      </div>
    </div>
  )
}

export default UserDropdown