import React from 'react';
import PropTypes from 'prop-types';

import { Button, Skeleton, Stack } from '@/mui/components';

import styles from './DesktopWrapper.module.scss';

function DesktopWrapper(props) {
  return (
    <Stack className={styles.Wrapper}>
      <Stack spacing={2} direction="row" alignItems="center" className={styles.Header}>
        <Button square color="error" shape="circular" size="small" />
        <Button square color="warning" shape="circular" size="small" />
        <Button square color="success" shape="circular" size="small" />
      </Stack>
      <Stack spacing={8} direction="row" fullWidth className={styles.WrapperContent}>
        <div className={styles.Content}>
          <Stack spacing={4}>{props.children}</Stack>
        </div>
        <div className={styles.Sidebar}>
          <Skeleton variant="rectangular" width="100%" height="100%" animation={false} />
        </div>
      </Stack>
    </Stack>
  );
}

DesktopWrapper.propTypes = {
  children: PropTypes.node,
};

export default DesktopWrapper;
