import React from 'react';
import PropTypes from 'prop-types';
import { withTheme } from '../styles';

import Box from '../Box';
import { Subtitle, Text } from '../Typography';

const CardContentComponent = (props) => {
  const { title, children } = props;

  const content =
    typeof children === 'string' ? <Text>{children}</Text> : children;

  return (
    <Box overflow="hidden" p="small" {...props}>
      {title !== '' && <Subtitle variation="special">{title}</Subtitle>}
      {content}
    </Box>
  );
};

CardContentComponent.propTypes = {
  title: PropTypes.string,
  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
};

CardContentComponent.defaultProps = {
  title: '',
  children: '',
};

CardContentComponent.displayName = 'CardContent';

export default withTheme(CardContentComponent);