import React, { FunctionComponent } from "react";
import PropTypes from "prop-types";
import classNames from "classnames";

import Button from "../Button";
import Icon from "react-oui-icons";

export interface CardProps {
     /** Elements that appears within the component */
     children: any,
     /** CSS class names. */
     className?: string,
     /** Method to invoke when a close element is clicked */
     onClose?: () => void,
     /** Display a subtle shadow around card. */
     shadow?: boolean,
     /** For automated testing only. */
     testSection?: string,
     /** A title to be displayed on the card */
     title: string,
}

const Card: FunctionComponent<CardProps> = ({
    children,
    className,
    onClose,
    shadow = false,
    testSection,
    title,
    ...props
}: CardProps) => {
    const closer = (
        <Button style="unstyled" onClick={onClose} testSection={`${testSection}-close`}>
            <Icon name="close" />
        </Button>
    );

    const classes = classNames({
        "push--bottom border--all": true,
        "oui-shadow--light": shadow,
    }, className);

    return (
        <div data-oui-component={true} className={classes} {...props}>
            {title && (
                <div className="flex border--bottom background--faint soft soft-half--ends">
                    <h4 className="flex--1" data-test-section={`${testSection}-title`}>
                        {title}
                    </h4>
                    <div>{onClose && closer}</div>
                </div>
            )}
            <div className="soft" data-test-section={`${testSection}-body`}>
                {children}
            </div>
        </div>
    );
};

Card.propTypes = {
    /** Elements that appears within the component */
    children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
    /** CSS class names. */
    className: PropTypes.string,
    /** method to invoke when a close element is clicked */
    onClose: PropTypes.func,
    /** Display a subtle shadow around card. */
    shadow: PropTypes.bool,
    /** For automated testing only. */
    testSection: PropTypes.string,
    /** What is the card title */
    title: PropTypes.string.isRequired,
};

export default Card;