"use client";

import { useNavigation } from '@/hooks/useNavigation';
import { MobileNav } from './MobileNav';
import { DesktopNavBar } from './DesktopNavBar';
import ProfileBanner from './ProfileBanner';
import { usePathname } from 'next/navigation';

export function ResponsiveNav({ bannerVisible, onDismissBanner }: { readonly bannerVisible: boolean; readonly onDismissBanner?: () => void }) {
  const { isMobile, activePath } = useNavigation();
  const pathname = usePathname();
  
  // Hide mobile navbar on session detail page
  const isSessionDetailPage = pathname?.startsWith('/sessions/') && pathname !== '/sessions';
  const shouldShowMobileNav = isMobile && !isSessionDetailPage;

  return (
    <>
      {bannerVisible && <ProfileBanner onDismiss={onDismissBanner} />}

      {shouldShowMobileNav ? (
        <MobileNav bannerVisible={bannerVisible} />
      ) : isMobile ? null : (
        <DesktopNavBar bannerVisible={bannerVisible} />
      )}
    </>
  );
}