import React from 'react';

interface PageLayoutProps {
  header: React.ReactNode;
  toolbar?: React.ReactNode;
  children: React.ReactNode;
  footer?: React.ReactNode;
  className?: string;
}

export const PageLayout: React.FC<PageLayoutProps> = ({
  header,
  toolbar,
  children,
  footer,
  className = '',
}) => {
  return (
    <div className={`flex flex-col h-[calc(100vh-140px)] md:h-[calc(100vh-160px)] w-full overflow-hidden ${className}`}>
      {/* Page Header (Fixed) */}
      <div className="shrink-0 mb-4">
        {header}
      </div>

      {/* Toolbar (Fixed) */}
      {toolbar && (
        <div className="shrink-0 mb-4">
          {toolbar}
        </div>
      )}

      {/* Scrollable Content Area */}
      <div className="flex-1 min-h-0 overflow-y-auto bg-ink-0 border border-ink-200 rounded-xl shadow-sm relative flex flex-col scrollbar-thin">
        {children}
      </div>

      {/* Page-level Footer/Pagination (Fixed) */}
      {footer && (
        <div className="shrink-0 mt-4">
          {footer}
        </div>
      )}
    </div>
  );
};

export default PageLayout;
