import React from 'react'
import { useNavigate } from 'react-router-dom'
import { User } from 'lucide-react'
import '../App.css' // 或者单独的 Header.css

export default function Header() {
  const navigate = useNavigate()

  const handleUserClick = () => {
    navigate('/user/1') // 或者使用实际的用户ID
  }

  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: 'pointer' }}
      >
        <div className="user-info">
          <User size={16} />
          <span>小红薯1</span>
        </div>
      </div>
    </header>
  )
}