'use client'
 
 import { useAuth } from './AuthProvider'
 import { useRouter } from 'next/navigation'
 
 interface NavBarProps {
   title: string
   showBack?: boolean
   showLogout?: boolean
 }
 
 export default function NavBar({ title, showBack = false, showLogout = false }: NavBarProps) {
   const { logout, user } = useAuth()
   const router = useRouter()
 
   return (
     <nav style={{
       position: 'sticky', top: 0, zIndex: 100,
       background: 'rgba(245,245,247,0.92)',
       backdropFilter: 'blur(20px)',
       WebkitBackdropFilter: 'blur(20px)',
       borderBottom: '0.5px solid #E5E5EA',
       padding: '12px 16px',
       display: 'flex', alignItems: 'center', justifyContent: 'space-between',
     }}>
       <div style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 60 }}>
         {showBack && (
           <button
             onClick={() => router.back()}
             style={{ background: 'none', border: 'none', fontSize: 20, cursor: 'pointer', padding: 4 }}
           >
             ←
           </button>
         )}
         {showLogout && user && (
           <button
             onClick={() => router.push('/profile')}
             style={{ background: 'none', border: 'none', fontSize: 15, cursor: 'pointer', color: '#FF6B35', padding: 4 }}
           >
             我的
           </button>
         )}
       </div>
 
       <span style={{ fontSize: 17, fontWeight: 600, flex: 1, textAlign: 'center' }}>{title}</span>
 
       <div style={{ minWidth: 60, textAlign: 'right' }}>
         {showLogout && (
           <button
             onClick={logout}
             style={{ background: 'none', border: 'none', fontSize: 15, cursor: 'pointer', color: '#86868B', padding: 4 }}
           >
             退出
           </button>
         )}
       </div>
     </nav>
   )
 }