import React from 'react';
import { CardHeader, ICardHeader } from './CardHeader';
import { CardBody, ICardBody } from './CardBody';
import { CardFooter, ICardFooter } from './CardFooter';

export interface ICard {
  className?: any;
  onClick?(): void;
  style?: React.CSSProperties;
  [x: string]: any;
}

export interface ICardSubComponents {
  Header: React.FC<ICardHeader>;
  Body: React.FC<ICardBody>;
  Footer: React.FC<ICardFooter>;
}

export const Card: React.FC<ICard> & ICardSubComponents = (props) => {
  const { children, className = '', onClick, style, ...otherProps } = props;
  return (
    <div className={`b-card ${className}`} onClick={onClick} style={style} {...otherProps}>
      {children}
    </div>
  );
};
Card.Header = CardHeader;
Card.Body = CardBody;
Card.Footer = CardFooter;