import { ReactNode } from 'react';

import { useTestIdAttribute } from '../../../../../hooks/useTestIdAttribute';
import { CommonProps } from '../../../../../types';
import { assertEmptyObject } from '../../../../../utils/assertEmptyObject';
import { useModalDialogContext } from '../../../contexts/ModalDialogContext';

import { StyledModalTitle } from './styled';

/** Props for {@link ModalTitle} */
export interface ModalTitleProps extends CommonProps {
  children: ReactNode;
}

/**
 * Title of the modal dialog.
 *
 * Should be always presented in dialog.
 */
export function ModalTitle(props: ModalTitleProps) {
  const { children, className, testId, ariaDescribedBy, ...rest } = props;
  assertEmptyObject(rest);

  const testIdAttribute = useTestIdAttribute();
  const { id } = useModalDialogContext();

  return (
    <StyledModalTitle
      aria-describedby={ariaDescribedBy}
      className={className}
      id={id}
      {...{ [testIdAttribute]: testId }}
    >
      {children}
    </StyledModalTitle>
  );
}