/**
 * @deprecated — no Hugo equivalent.
 * Custom scrollbar wrapper using `react-perfect-scrollbar`. Falls back to native scroll on mobile.
 * Hint: consider replacing with native CSS (`overflow: auto` + scrollbar styling) or
 * `VirtualizedList` from `@material-hu/components/composed-components/VirtualizedList` per consumer.
 */
import { forwardRef } from 'react';
import PerfectScrollbar, { ScrollBarProps } from 'react-perfect-scrollbar';

import Box from '@material-hu/mui/Box';

const Scrollbar = forwardRef<HTMLDivElement, ScrollBarProps>((props, ref) => {
  const { children, ...other } = props;

  const isMobile =
    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
      navigator.userAgent,
    );

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

  return (
    <PerfectScrollbar
      // @ts-ignore
      ref={ref}
      {...other}
    >
      {children}
    </PerfectScrollbar>
  );
});

Scrollbar.displayName = 'Scrollbar';

export default Scrollbar;