import React, { ReactNode, ReactElement } from 'react';
import css from '../../utils/css';
import { ModalHeader as StyledModalHeader } from './StyledModal';
import ModalContext, { ModalContextType } from './ModalContext';

import { CommonProps } from '../common';

export interface ModalHeaderProps extends CommonProps {
  /**
   * Modal header content.
   */
  children: ReactNode;
}

const ModalHeader = ({
  children,
  id,
  className,
  style,
  sx = {},
  'data-test-id': dataTestId,
}: ModalHeaderProps): ReactElement => {
  const { variant } = React.useContext(ModalContext) as ModalContextType;
  return (
    <StyledModalHeader
      themeVariant={variant}
      id={id}
      className={className}
      style={{ ...style, ...css(sx) }}
      data-test-id={dataTestId}
    >
      {children}
    </StyledModalHeader>
  );
};

export default ModalHeader;