import React, { ReactNode, ReactElement } from 'react';
import css from '../../utils/css';
import { ModalFooter as StyledModalFooter } from './StyledModal';
import { CommonProps } from '../common';

export interface ModalFooterProps extends CommonProps {
  /**
   * Modal footer content.
   */
  children: ReactNode;
}

const ModalFooter = ({
  children,
  id,
  className,
  style,
  sx = {},
  'data-test-id': dataTestId,
}: ModalFooterProps): ReactElement => (
  <StyledModalFooter
    id={id}
    className={className}
    style={{ ...style, ...css(sx) }}
    data-test-id={dataTestId}
  >
    {children}
  </StyledModalFooter>
);

export default ModalFooter;