import React, { ComponentProps, forwardRef, ReactNode } from 'react';
import { DialogTitle as MuiDialogTitle } from '@mui/material';
import { CloseRounded } from '@mui/icons-material';

import IconButton from '../IconButton/IconButton';

type MuiProps = ComponentProps<typeof MuiDialogTitle>;

type Props = {
  onClose?: () => void;
  closeIcon?: ReactNode;
} & MuiProps;

const DialogTitle = forwardRef<HTMLDivElement, Props>((props$, ref) => {
  const { onClose, closeIcon, ...props } = props$;

  return (
    <MuiDialogTitle {...props} ref={ref}>
      {onClose && (
        <IconButton size="medium" onClick={onClose}>
          {closeIcon ?? <CloseRounded />}
        </IconButton>
      )}
      {props.children}
    </MuiDialogTitle>
  );
});

DialogTitle.displayName = 'DialogTitle';

export default DialogTitle;
