import React from 'react';
import { useTheme } from '../../contexts';

interface ContentProps {
  children: React.ReactNode;
  wide?: boolean;
}

export const Content: React.FC<ContentProps> = ({ children, wide = false }) => {
  const { theme } = useTheme();

  return (
    <main
      style={{
        flex: 1,
        padding: '48px 56px',
        maxWidth: wide ? 1400 : 1100,
        margin: '0 auto',
        width: '100%',
        position: 'relative',
        backgroundColor: theme.bg,
      }}
    >
      {children}
    </main>
  );
};