/**
 * Card Component
 *
 * @package Advanced_Customer_Account
 */

import classnames from 'classnames';

/**
 * Card component for content containers.
 *
 * @param {Object}      props           Component props.
 * @param {string}      props.title     Card title.
 * @param {JSX.Element} props.actions   Header actions.
 * @param {JSX.Element} props.children  Card content.
 * @param {JSX.Element} props.footer    Card footer.
 * @param {string}      props.className Additional CSS classes.
 * @param {boolean}     props.noPadding Remove padding from body.
 * @return {JSX.Element} Card component.
 */
const Card = ( {
    title,
    actions,
    children,
    footer,
    className = '',
    noPadding = false,
} ) => {
    const classes = classnames( 'aca-card', className );
    const bodyClasses = classnames( 'aca-card__body', {
        'aca-card__body--no-padding': noPadding,
    } );

    return (
        <div className={ classes }>
            { ( title || actions ) && (
                <div className="aca-card__header">
                    { title && <h2 className="aca-card__title">{ title }</h2> }
                    { actions && <div className="aca-card__actions">{ actions }</div> }
                </div>
            ) }
            <div className={ bodyClasses }>{ children }</div>
            { footer && <div className="aca-card__footer">{ footer }</div> }
        </div>
    );
};

export default Card;