import React from 'react';
import PropTypes from 'prop-types';
import Button from '../Button';
import Icon from '../Icon';
import Translate from '../Translate';
import './styles.scss';

const EmptyState = ({
    icon,
    title,
    text,
    button,
    onChange,
}) => (
    <div className="EmptyState">
        <div
            className="EmptyState__icon"
        >
            <Icon
                name={icon}
                size="large"
                color="blue"
            />
        </div>
        <div className="EmptyState__title">
            <Translate tag={title} />
        </div>
        <div className="EmptyState__text">
            <Translate tag={text} />
        </div>
        <Button
            title={button.title}
            elementId={button.id}
            isPrimary
            onChangePromise={onChange}
        />
    </div>
);

EmptyState.propTypes = {
    icon: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    text: PropTypes.string.isRequired,
    button: PropTypes.object.isRequired,
    onChange: PropTypes.func.isRequired,
};

export default EmptyState;