import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../tools/namingTools';
import Image from '../image/Image';
import './styles/BundleLogo.scss';

const n = createNamespace('BundleLogo');

const BundleLogo = ({
    data: {
        title,
        logoSrc,
        logoSrcset
    }
}) => {
    if (!title && !logoSrc && !logoSrcset) {
        return null;
    }

    const srcset = logoSrcset && (logoSrcset['2x'] || logoSrcset.default);
    const src = srcset || logoSrc;

    return (
        <div {...n('wrapper').props}>
            {src && (
                <Image
                    src={src}
                    alt={title}
                    {...n('logo').withTestId().props}
                />
            )}
            {title && <span {...n('title').withTestId().props}>{title}</span>}
        </div>
    );
};

BundleLogo.propTypes = {
    data: PropTypes.shape({
        title: PropTypes.string,
        logoSrc: PropTypes.string,
        logoSrcset: PropTypes.shape({
            default: PropTypes.string,
            '2x': PropTypes.string
        })
    })
};

BundleLogo.defaultProps = {
    data: {
        title: '',
        logoSrc: '',
        logoSrcset: {
            default: '',
            '2x': ''
        }
    }
};

export default BundleLogo;
