import { type ComponentPropsWithoutRef } from 'react';
import { ScrollArea as RScrollArea } from 'radix-ui';
import { cx } from '../utils';

export const ScrollArea = ({
  children,
  className,
  ...props
}: ComponentPropsWithoutRef<typeof RScrollArea.Root>) => (
  <RScrollArea.Root className={cx('mta-scroll', className)} {...props}>
    <RScrollArea.Viewport className="mta-scroll__viewport">
      {children}
    </RScrollArea.Viewport>
    <RScrollArea.Scrollbar className="mta-scroll__bar" orientation="vertical">
      <RScrollArea.Thumb className="mta-scroll__thumb" />
    </RScrollArea.Scrollbar>
    <RScrollArea.Scrollbar className="mta-scroll__bar" orientation="horizontal">
      <RScrollArea.Thumb className="mta-scroll__thumb" />
    </RScrollArea.Scrollbar>
    <RScrollArea.Corner />
  </RScrollArea.Root>
);
