import { ReactNode } from "react";
import { useLocation } from "react-router-dom";
import Navbar from "./components/Navbar";
import { Footer } from "./components/Footer";
import { getAutoNavigationSource } from "./utils/getAutoNavigationSource";

interface User {
  email: string;
  name: string;
}

interface LayoutProps {
  children: ReactNode;
  activeCity?: string;
  onSignInClick?: () => void;
  onSignOutClick?: () => void;
  user?: User | null;
}

export function Layout({
  children,
  activeCity,
  onSignInClick,
  onSignOutClick,
  user,
}: LayoutProps) {
  const location = useLocation();

  // 🧠 Use the helper to determine which city to show
  const cityToUse = activeCity || getAutoNavigationSource(location);

  return (
    <div className="min-h-screen bg-background flex flex-col">
      <Navbar
        activeCity={cityToUse}
        onCityChange={() => {}}
        onSignInClick={() => onSignInClick?.()}
        onSignOutClick={onSignOutClick}
        isUserSignedIn={!!user}
        user={user}
      />

      <main className="flex-1">{children}</main>

      <Footer />
    </div>
  );
}
