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

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

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

function MobileWrapper(props) {
  return (
    <div className={styles.Wrapper}>
      <Stack elevation={1} component={Paper} spacing={2} className={styles.WrapperContent}>
        <div>
          <Skeleton variant="rectangular" width="100%" height="80px" animation={false} />
        </div>
        <div className={styles.Content}>
          <div className={styles.List}>
            <Stack spacing={6}>{props.children}</Stack>
          </div>
        </div>
      </Stack>
    </div>
  );
}

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

export default MobileWrapper;
