import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../tools/namingTools';

import Icon from '../icon/Icon';

import './styles/CartAddonPreview.scss';

const n = createNamespace('CartAddonPreview');

const CartAddonPreview = ({
    variant,
    branding
}) => {
    const { name } = branding;

    if (!name) {
        return null;
    }

    return (
        <div {...n('wrapper', variant).withTestId().props}>
            <div {...n('imageWrapper').withTestId().props}>
                <Icon type="addon" {...n('image').props} />
            </div>
            <div {...n('content').props}>
                {name && (
                    <h4 {...n('title').withTestId().props}>{name}</h4>
                )}
            </div>
        </div>
    );
};

CartAddonPreview.propTypes = {
    variant: PropTypes.string,
    branding: PropTypes.shape({
        name: PropTypes.string
    })
};

CartAddonPreview.defaultProps = {
    variant: null,
    branding: {}
};

export default CartAddonPreview;
