import React, { Component } from 'react';
import PropTypes from 'prop-types';

import classnames from 'classnames';

class Card extends Component {
  static propTypes = {
    header: PropTypes.any,
    content: PropTypes.any,
    children: PropTypes.any,
    footer: PropTypes.any,
    greyFooter: PropTypes.bool,
    className: PropTypes.string,
    customClassNames: PropTypes.shape({
      cardHeader: PropTypes.string,
      cardContent: PropTypes.string,
      cardFooter: PropTypes.string,
    }),
  };

  static defaultProps = {
    content: null,
    children: null,
    header: null,
    footer: null,
    greyFooter: false,
    className: null,
    customClassNames: {
      cardHeader: '',
      cardContent: '',
      cardFooter: '',
    },
  };

  render() {
    const { header, children, content, footer, greyFooter, className, customClassNames } = this.props;
    const componentClassName = classnames('Card', {
      'Card--greyFooter': greyFooter,
      [className]: className,
    });
    const headerClassName = classnames('Card-header', {
      [customClassNames.cardHeader]: customClassNames.cardHeader,
    });
    const contentClassName = classnames('Card-content', {
      [customClassNames.cardContent]: customClassNames.cardContent,
    });
    const footerClassName = classnames('Card-footer', {
      [customClassNames.cardFooter]: customClassNames.cardFooter,
    });

    return (
      <article className={componentClassName}>
        {children}
        {!children && header && <div className={headerClassName}>{header}</div>}
        {!children && <div className={contentClassName}>{content}</div>}
        {!children && footer && <div className={footerClassName}>{footer}</div>}
      </article>
    );
  }
}

export default Card;