import React from 'react';
import {
    Title,
    Button,
    EmptyState,
    EmptyStateIcon,
    EmptyStateBody
} from '@patternfly/react-core';
import WrenchIcon from '@patternfly/react-icons/dist/esm/icons/wrench-icon';
import { useIntl } from 'react-intl';
import messages from '../../Messages';
import propTypes from 'prop-types';

const EmptyAccount = ({ message, className }) => {
    const intl = useIntl();
    return (
        <EmptyState className={className} variant='large'>
            <EmptyStateIcon icon={WrenchIcon} />
            <Title headingLevel="h4" size="lg">
                {intl.formatMessage(messages.emptyAccountTitle)}
            </Title>
            <EmptyStateBody>
                {message}
            </EmptyStateBody>
            <Button
                variant="primary"
                component="a"
                href={'https://access.redhat.com/documentation/en-us/red_hat_insights/2022/html/' +
                'assessing_and_reporting_malware_signatures_on_rhel_systems_with_the_insights_for' +
                '_rhel_malware_service/'}
                target="_blank" >
                {intl.formatMessage(messages.emptyAccountButton)}
            </Button>
        </EmptyState>
    );
};

EmptyAccount.propTypes = {
    message: propTypes.string,
    className: propTypes.string
};

export default EmptyAccount;