import Scrollbars from 'react-custom-scrollbars-2';
import React from 'react';
import styled from 'styled-components';

interface IProps {
  children: React.ReactNode;
  thumbHeight?: number;
}

function CustomScrollBar(props: IProps) {
  const { children, thumbHeight = 66 } = props;
  return (
    <Scrollbars
      thumbSize={thumbHeight}
      renderTrackHorizontal={props => <TrackHorizontal {...props} />}
      renderView={props => <View {...props} />}
      renderThumbVertical={props => <ThumbVertical {...props} />}
    >
      {children}
    </Scrollbars>
  );
}

const ThumbVertical = styled.div`
  background-color: #586164;
  border-radius: 66px;
  width: 2px !important; // to overide styles
  margin-top: 60px;
`;

const View = styled.div`
  overflow-x: hidden;
`;

const TrackHorizontal = styled.div`
  display: none;
`;

export default CustomScrollBar;
