import { useAuth } from '../../utils/hooks'

const Navbar = ({ title, subtitle }) => {
  const { user } = useAuth()
  const TEAL = '#409CA4'

  return (''
    // <div className="sticky top-0 z-20 bg-[#f8fbfc] pt-2 pb-6">
    //   <div
    //     className="rounded-3xl shadow-2xl p-7 md:p-8 flex flex-col md:flex-row items-center justify-between gap-6 overflow-hidden relative"
    //     style={{
    //       background: `linear-gradient(135deg, ${TEAL} 0%, #2A7E85 100%)`,
    //       borderBottom: '4px solid rgba(0,0,0,0.1)'
    //     }}
    //   >
    //     {/* Subtle background decoration */}
    //     <div className="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full -mr-20 -mt-20 blur-3xl pointer-events-none" />
    //     <div className="absolute bottom-0 left-0 w-48 h-48 bg-black/5 rounded-full -ml-10 -mb-10 blur-2xl pointer-events-none" />

    //     <div className="relative z-10 flex-1 text-center md:text-left">
    //       <h1 className="text-3xl md:text-4xl font-black text-white tracking-tight drop-shadow-md">
    //         {title}
    //       </h1>
    //       {subtitle && (
    //         <p className="text-[#e2f1f2] mt-2 font-bold text-base md:text-lg opacity-90">
    //           {subtitle}
    //         </p>
    //       )}
    //     </div>

    //     <div className="relative z-10 bg-white/10 backdrop-blur-md border border-white/20 p-5 rounded-2xl flex items-center gap-4 shadow-inner">
    //       <div className="w-14 h-14 bg-white rounded-2xl flex items-center justify-center text-2xl shadow-lg ring-4 ring-white/10">
    //         {user?.name?.charAt(0) || 'A'}
    //       </div>
    //       <div className="text-left">
    //         <p className="text-xs font-black text-[#e2f1f2] uppercase tracking-widest opacity-80">Connected as</p>
    //         <p className="font-black text-xl text-white capitalize leading-none mt-1">
    //           {user?.name || user?.email?.split('@')[0] || 'Administrator'}
    //         </p>
    //         <div className="flex items-center gap-2 mt-2">
    //           <span className="w-2 h-2 rounded-full bg-[#5cb85c] animate-pulse" />
    //           <p className="text-xs font-black text-[#f0ad4e] uppercase bg-white/10 px-2 py-0.5 rounded-md">
    //             {user?.role || 'Full Access'}
    //           </p>
    //         </div>
    //       </div>
    //     </div>
    //   </div>
    // </div>
  )
}

export default Navbar
