'use client';

import { Box } from '@/ui/Box';
import { ReactNode } from 'react';

interface MainContentProps {
  children: ReactNode;
  hasSidebar: boolean;
}

export function MainContent({ children, hasSidebar }: MainContentProps) {
  return (
    <Box
      as="main"
      display="flex"
      flexDirection="col"
      flexGrow={1}
      style={{
        paddingTop: '56px', // Header height
        marginLeft: hasSidebar ? '260px' : '0',
        transition: 'margin-left 0.2s ease-in-out',
      }}
    >
      <Box
        position="relative"
        width="full"
        maxWidth="full"
        flexGrow={1}
        display="flex"
        flexDirection="col"
      >
        {/* Background Grid */}
        <Box
          position="absolute"
          inset={0}
          pointerEvents="none"
          zIndex={0}
          style={{
            backgroundImage:
              'radial-gradient(circle at 2px 2px, rgba(255,255,255,0.018) 1px, transparent 0)',
            backgroundSize: '32px 32px',
            opacity: 0.5,
            backgroundAttachment: 'fixed',
          }}
        />

        {/* Content */}
        <Box position="relative" zIndex={1} flexGrow={1} display="flex" flexDirection="col">
          {children}
        </Box>
      </Box>
    </Box>
  );
}