// src/components/Header.jsx
import React from 'react'
import { useNavigate } from 'react-router-dom'
import { User } from 'lucide-react'
import { getUserInfo } from '../utils/auth'
import '../App.css'

export default function Header() {
  const navigate = useNavigate()
  const user = getUserInfo() || {}
  const userId = user.id
  // 假设后端返回的 user 对象里有个 nickname 字段，否则 fallback 到 “小红薯”
  const displayName = user.nickname || user.username || '小红薯'

  const handleUserClick = () => {
    if (userId) {
      navigate(`/user/${userId}`)
    }
  }

  return (
    <header className="header">
      <div className="header-left">
        <div className="logo">小红书</div>
        <h1 className="header-title">创作服务平台</h1>
      </div>
      <div
        className="header-right"
        onClick={handleUserClick}
        style={{ cursor: userId ? 'pointer' : 'default' }}
      >
        <div className="user-info">
          <User size={16} />
          <span>
            {displayName}
            {userId ? userId : ''}
          </span>
        </div>
      </div>
    </header>
  )
}