import { useNavigate, useLocation } from 'react-router-dom'
import { User, LogOut, ArrowLeft } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { getUserInfoFromCookie, clearAuthCookies } from '@/utils/cookie'
import { Cloud} from 'lucide-react'
export default function Header() {
  const navigate = useNavigate()
  const location = useLocation()
  const userInfo = getUserInfoFromCookie()

  // 只在 /cloud 路由下显示用户信息和登出按钮
  const isCloudPage = location.pathname === '/cloud'

  const handleLogout = () => {
    clearAuthCookies()
    localStorage.removeItem('access_token')
    localStorage.removeItem('refresh_token')
    navigate('/login')
  }

  const handleBack = () => {
    navigate(-1)
  }

  return (
    <header className="h-14 bg-white border-b border-gray-200 flex items-center justify-between px-4">
      <div className="flex items-center space-x-4">
      <Cloud className="h-12 w-12 text-primary mx-auto mb-4" />
        <span className="font-semibold text-gray-900">Cloudaloud网盘</span>
      </div>

      {userInfo && isCloudPage && (
        <div className="flex items-center space-x-4">
          <div className="flex items-center space-x-2">
            <User className="h-4 w-4 text-gray-600" />
            <span className="text-sm text-gray-700">你好，{userInfo.username}</span>
            <Button variant="ghost" size="sm" onClick={handleLogout}>
            <span className="h-4 w-4">登出</span>
          </Button>
          </div>
        </div>
      )}
    </header>
  )
}