import React from 'react'
import { BottomNavigation } from './BottomNavigation'
import { FloatingCartBar } from './FloatingCartBar'
import { useLocation } from '@tanstack/react-router'

interface AppLayoutProps {
  children: React.ReactNode
  showCartBar?: boolean
  isFlashDelivery?: boolean
}

// Routes where bottom nav should be hidden
const hideBottomNavRoutes = ['/login', '/register', '/checkout', '/cart']

export function AppLayout({ children, showCartBar = true, isFlashDelivery = false }: AppLayoutProps) {
  const location = useLocation()
  const currentPath = location.pathname

  const shouldShowBottomNav = !hideBottomNavRoutes.some((route) =>
    currentPath === route || currentPath.startsWith(`${route}/`)
  )

  const shouldShowCartBar = showCartBar && shouldShowBottomNav

  return (
    <div className="relative min-h-screen pb-20">
      {/* Main Content */}
      <main>{children}</main>

      {/* Floating Cart Bar - positioned above bottom nav */}
      {shouldShowCartBar && (
        <FloatingCartBar isFlashDelivery={isFlashDelivery} />
      )}

      {/* Bottom Navigation */}
      {shouldShowBottomNav && <BottomNavigation />}
    </div>
  )
}
