import { clsx } from 'clsx';
import React from 'react';

import { Box } from '../box';
import { forwardRef } from '../utils/react';
import * as css from './scroll-area.css';

/*-- Types --*/

export interface ScrollAreaProps {}

/*-- Main --*/

export const ScrollArea = forwardRef<'div', ScrollAreaProps>(
  function ScrollArea({ className, children, ...rest }, ref) {
    return (
      <Box ref={ref} className={clsx(className, css.scrollArea)} {...rest}>
        {children}
      </Box>
    );
  },
);