import React, {PureComponent} from 'react';
import PropTypes from "prop-types";

/**
 * Component that displays the main crate with reminder rules.
 * It includes <Cart> and rules
 */
export class Crate extends PureComponent {

    static get propTypes() {
        return {
            rules: PropTypes.array,
            cart: PropTypes.element,
        };
    }

    render() {
        const {
            rules,
            cart,
        } = this.props;

        return (
            <div className="crate">

                <div className="crate-products">

                    {cart}

                    {rules && rules.length > 0 && (
                        <div className="crate-info">
                            {rules.map((rule, index) => (
                                <p key={index} className="rule" style={{'color': rule.color ? rule.color : 'inherit'}}>
                                    <img src={`/images${rule.icon}`} /> <i><strong>{rule.name}:</strong> {rule.message}</i>
                                </p>
                            ))}
                        </div>
                    )}
                </div>

            </div>
        );
    }
}