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

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

export interface CardContentProps extends CommonProps {
  /**
   * Custom content.
   */
  children?: string | ReactElement;
  /**
   * Short hand for Card's content.
   */
  content?: string | ReactElement;
  /**
   * Format as extra content.
   */
  extra?: boolean;
}

const CardContent = ({
  content,
  extra = false,
  children,
  id,
  className,
  style,
  sx = {},
  'data-test-id': dataTestId,
}: CardContentProps): ReactElement => {
  const variant = extra === true ? 'extra' : 'mainContent';
  const { size } = React.useContext(CardContext) as CardContextType;

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

export default CardContent;