import { ReactNode } from 'react';

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

import { StyledModalFooter } from './styled';

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

/**
 * Footer of the modal dialog.
 *
 * Can contain up to 2 {@link ModalFooterButtonGroup}.
 */
export function ModalFooter(props: ModalFooterProps) {
  const { children, className, testId, ariaDescribedBy, ...rest } = props;
  assertEmptyObject(rest);

  const testIdAttribute = useTestIdAttribute();

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