import React from 'react';
import BottomNav from './BottomNav';
import GradientHeader from '../ui/GradientHeader';

/**
 * AppLayout component provides consistent layout across the app
 * 
 * @param {Object} props - Component props
 * @param {ReactNode} props.children - Child elements 
 * @param {string} props.title - Page title
 * @param {boolean} props.showBackButton - Whether to display back button
 * @param {Function} props.onBack - Back button click handler
 * @param {ReactNode} props.rightContent - Content to display on the right side of header
 * @returns {JSX.Element} AppLayout component
 */
const AppLayout = ({ children, title, showBackButton, onBack, rightContent }) => {
  const handleBack = () => {
    if (onBack) {
      onBack();
    } else {
      window.history.back();
    }
  };

  return (
    <div className="bg-gradient-to-br from-green-50 via-teal-50 to-blue-50 min-h-screen pb-16">
      <GradientHeader 
        title={title} 
        showBackButton={showBackButton} 
        onBack={handleBack}
        rightContent={rightContent}
      />
      <main className="pb-16">
        {children}
      </main>
      <BottomNav />
    </div>
  );
};

export default AppLayout;