import React from 'react';
import { cn } from '@/lib/utils';
import { AppPageLayoutHeader } from './AppPageLayoutHeader';
import { AppPageLayoutContent } from './AppPageLayoutContent';

/**
 * @param header - Header content at the top of the page
 * @param floating - Applies floating styles (default: true)
 * @param scrollable - Makes content scrollable (default: true)
 * @param className - Additional CSS classes
 * @param children - Page content
 * @internal
 */
export const AppPageLayout: React.FC<
  React.PropsWithChildren<{
    header?: React.ReactNode;
    scrollable?: boolean;
    className?: string;
    headerSizeVariant?: 'default' | 'list';
    headerBorderVariant?: 'default' | 'ghost';
    headerClassName?: string;
    mainClassName?: string;
  }>
> = ({
  children,
  header,
  scrollable = false,
  className = '',
  headerSizeVariant = 'default',
  headerBorderVariant = 'default',
  headerClassName = '',
  mainClassName = ''
}) => {
  return (
    <div
      className={cn(
        'app-page-layout flex h-full w-full flex-col overflow-hidden',
        scrollable && 'overflow-y-auto',
        className
      )}>
      {header && (
        <AppPageLayoutHeader
          className={cn(
            headerBorderVariant === 'ghost' && 'relative z-10 -mt-[1px]',
            headerClassName
          )}
          sizeVariant={headerSizeVariant}
          borderVariant={headerBorderVariant}>
          {header}
        </AppPageLayoutHeader>
      )}

      <AppPageLayoutContent
        className={cn(headerBorderVariant === 'ghost' && 'scroll-shadow-container', mainClassName)}
        scrollable={scrollable}>
        {header && scrollable && headerBorderVariant === 'ghost' && (
          <div className="scroll-header"></div>
        )}

        {children}
      </AppPageLayoutContent>
    </div>
  );
};