import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
import Box from '@mui/material/Box';
import { SxProps } from '@mui/system';
import { styled } from '@mui/material/styles';
import { useMediaQuery, Theme } from '@mui/material';

const SimpleBarStyle = styled(SimpleBar)(() => ({
  maxHeight: '100%',
}));

interface ScrollbarProps {
  children: React.ReactElement | React.ReactNode;
  sx?: SxProps;
}

const Scrollbar = (props: ScrollbarProps) => {
  const { children, sx, ...other } = props;
  const lgDown = useMediaQuery((theme: Theme) => theme.breakpoints.down('lg'));

  if (lgDown) {
    return <Box sx={{ overflowX: 'auto' }}>{children}</Box>;
  }

  return (
    <SimpleBarStyle sx={sx} {...other}>
      {children}
    </SimpleBarStyle>
  );
};

export default Scrollbar;
