import { Box } from '@mui/material';
import React, { type PropsWithChildren, type ReactElement } from 'react';
import { TopBar } from './TopBar.tsx';

export type ContentProps = PropsWithChildren;

export function Content({ children }: ContentProps): ReactElement {
    return (
        <Box
            sx={{
                width: { xs: '100%', md: '80%' },
                margin: 'auto',
                height: 'calc(100vh - 25px)',
                color: (theme) => theme.palette.text.primary,
            }}
        >
            <TopBar />
            {children}
        </Box>
    );
}