import * as React from 'react';
import classnames from 'classnames';

import {CardContent} from './CardContent';
import {CardImage} from './CardImage';

export type CardProps = {
    testAutomationId: string;
    secondary: boolean;
    hasFooter: boolean;
    onClick?: React.DOMAttributes<HTMLElement>['onClick'];
};

export class Card extends React.PureComponent<CardProps> {
    static Image = CardImage;
    static Content = CardContent;

    static defaultProps = {
        secondary: false,
        hasFooter: false,
        testAutomationId: 'card'
    };

    render() {
        const props = this.props;

        const className = classnames('rc-card', {
            'rc-card--secondary': props.secondary,
            'rc-card--with-footer': props.hasFooter,
            'rc-card--clickable': props.onClick
        });

        return (
            // eslint-disable-next-line
            <section
                data-test-automation-id={props.testAutomationId}
                className={className}
                onClick={props.onClick}
                role={props.onClick ? 'button' : 'presentation'}>
                {props.children}
            </section>
        );
    }
}
