/**
 * External dependencies.
 */
import { Icon } from '@wordpress/components';
import { backup } from '@wordpress/icons';
import { getNotCoveredNoticeCopy } from './vaultCoverageCopy';

/**
 * Shown in place of "What is Plugin Vault?" when the Vault has no versions of
 * this plugin or theme, so nobody upgrades expecting one. The copy lives in
 * getNotCoveredNoticeCopy().
 *
 * @param {Object} props              Component props.
 * @param {string} props.assetName    Plugin or theme name.
 * @param {number} props.localBackups How many local backups this site has.
 * @return {JSX.Element} The notice.
 */
const VaultNotCoveredNotice = ( { assetName, localBackups } ) => {
    const { heading, message } = getNotCoveredNoticeCopy( assetName, localBackups );

    return (
        <div className="wpr-premium-upsell__vault-info">
            <div className="wpr-premium-upsell__vault-info-icon">
                <Icon icon={ backup } />
            </div>
            <div>
                <h3>{ heading }</h3>
                <p>{ message }</p>
            </div>
        </div>
    );
};

export default VaultNotCoveredNotice;