import { User } from 'lucide-react';
import GlassButton from '../ui/GlassButton';

/**
 * Header 组件
 * 固定定位头部，包含 logo 和用户按钮
 * @param {Object} props
 * @param {boolean} props.showNav - 是否显示导航按钮
 * @param {Function} props.onProfileClick - 用户按钮点击回调
 */
const Header = ({ showNav = false, onProfileClick }) => {
  /**
   * 处理 logo 点击，刷新页面
   */
  const handleLogoClick = () => {
    window.location.reload();
  };

  return (
    <header className="fixed top-0 left-0 p-6 z-50 w-full flex justify-between items-center pointer-events-none">
      {/* Logo 区域 */}
      <div 
        className="flex items-center gap-3 pointer-events-auto cursor-pointer"
        onClick={handleLogoClick}
      >
        <img 
          src="https://r2-bucket.flowith.net/f/cf8c6e7c020409c9/lifeline_app_logo_design_index_0%401024x1024.jpeg" 
          alt="logo" 
          className="w-10 h-10 rounded-full shadow-2xl border border-white/10"
        />
        <h1 className="text-xl font-serif tracking-[0.2em] bg-clip-text text-transparent bg-gradient-to-r from-white to-white/50">
          人生轨迹
        </h1>
      </div>

      {/* 导航区域 */}
      {showNav && (
        <nav className="pointer-events-auto">
          <GlassButton 
            variant="icon"
            onClick={onProfileClick}
            className="hover:shadow-orange-200/10 shadow-lg"
          >
            <User className="w-5 h-5" />
          </GlassButton>
        </nav>
      )}
    </header>
  );
};

export default Header;