import React, { ReactElement } from 'react';
import css from '../../utils/css';

import { StyledCardHeader } from './StyledCard';
import { CommonProps } from '../common';
import CardContext, { CardContextType } from './CardContext';

export interface CardHeaderProps extends CommonProps {
  /**
   * Custom content.
   */
  children?: string | ReactElement;
  /**
   * Short hand for Header content.
   */
  content?: string | ReactElement;
}

const CardHeader = ({
  content,
  children,
  id,
  className,
  style,
  sx = {},
  'data-test-id': dataTestId,
}: CardHeaderProps): ReactElement => {
  const { variant, size } = React.useContext(CardContext) as CardContextType;

  return (
    <StyledCardHeader
      themeVariant={variant}
      themeSize={size}
      id={id}
      className={className}
      style={{ ...style, ...css(sx) }}
      data-test-id={dataTestId}
    >
      {children !== undefined ? children : content}
    </StyledCardHeader>
  );
};

export default CardHeader;