import React from 'react';
import { clsx } from 'clsx';
import * as BaseDialog from '@radix-ui/react-dialog';

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

export interface DialogContentBaseProps
  extends BaseDialog.DialogContentProps,
    css.ContentVariants {}

export const DialogContentBase = forwardRef<'div', DialogContentBaseProps>(
  function DialogContentBase(
    { children, className, isScrollable, maxWidth, modal, ...rest },
    ref,
  ) {
    const cn = clsx(className, css.content({ isScrollable, maxWidth, modal }));

    return (
      <BaseDialog.Content asChild {...rest}>
        <Box ref={ref} className={cn}>
          {children}
        </Box>
      </BaseDialog.Content>
    );
  },
);