/**
 * EmptyState Component
 *
 * @package Advanced_Customer_Account
 */

import { __ } from '@wordpress/i18n';
import classnames from 'classnames';

/**
 * Empty state component for when no data is available.
 *
 * @param {Object}      props           Component props.
 * @param {string}      props.icon      Dashicon name.
 * @param {string}      props.title     Title text.
 * @param {string}      props.message   Description message.
 * @param {JSX.Element} props.action    Optional action button.
 * @param {string}      props.className Additional CSS classes.
 * @return {JSX.Element} EmptyState component.
 */
const EmptyState = ( {
    icon = 'admin-page',
    title,
    message,
    action = null,
    className = '',
} ) => {
    const classes = classnames( 'aca-empty-state', className );

    return (
        <div className={ classes }>
            <span className={ `dashicons dashicons-${ icon }` } aria-hidden="true" />
            { title && <h3 className="aca-empty-state__title">{ title }</h3> }
            { message && <p className="aca-empty-state__message">{ message }</p> }
            { action && <div className="aca-empty-state__action">{ action }</div> }
        </div>
    );
};

export default EmptyState;