import React from 'react';
import { AppScreen } from '../types';
import { BottomNav } from './BottomNav';

interface LayoutProps {
  children: React.ReactNode;
  currentScreen: AppScreen;
  setScreen: (screen: AppScreen) => void;
  hideNav?: boolean;
}

export const Layout: React.FC<LayoutProps> = ({ children, currentScreen, setScreen, hideNav }) => {
  return (
    <div className="relative flex flex-col min-h-screen w-full overflow-x-hidden max-w-md mx-auto shadow-2xl bg-background-light dark:bg-background-dark border-x border-gray-200 dark:border-border-dark/30">
      <main className="flex-1 flex flex-col">
        {children}
      </main>
      
      {!hideNav && (
        <BottomNav currentScreen={currentScreen} setScreen={setScreen} />
      )}
    </div>
  );
};