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

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

export interface DialogTitleProps {}

export const DialogTitle = forwardRef<'h2', DialogTitleProps>(
  function DialogTitle({ as = 'h2', children, className, ...rest }, ref) {
    const cn = clsx(className, css.title);

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