import React from 'react';
import { Box } from 'ink';
import { Header } from './Header.js';
import { StatusBar } from './StatusBar.js';
import { useTerminalSize } from '../../hooks/useTerminalSize.js';

// Header: double border (top + bottom) + 1 content line = 3 rows
const HEADER_HEIGHT = 3;
const STATUSBAR_HEIGHT = 1;

interface MainLayoutProps {
  children: React.ReactNode;
  showHeader?: boolean;
}

export function MainLayout({ children, showHeader = true }: MainLayoutProps) {
  const { columns, rows } = useTerminalSize();
  const contentHeight = rows - (showHeader ? HEADER_HEIGHT : 0) - STATUSBAR_HEIGHT;

  return (
    <Box flexDirection="column" width={columns} height={rows}>
      {showHeader && <Header />}
      <Box
        flexDirection="column"
        paddingX={2}
        paddingY={1}
        height={contentHeight}
        overflow="hidden"
      >
        {children}
      </Box>
      <StatusBar />
    </Box>
  );
}
