import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../tools/namingTools';
import Image from '../image/Image';
import { getImageSrc } from '../../tools/images';
// IMPORTANT: (s)css should be imported after other atoms/components
import './styles/BundleLogo.scss';

const n = createNamespace('BundleLogo');

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

    const src = getImageSrc(logoSrc, logoSrcset);

    return (
        <div {...n('wrapper').props}>
            {src && (
                <Image
                    src={src}
                    alt={logoAlt}
                    {...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
        }),
        logoAlt: PropTypes.string
    })
};

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

export default BundleLogo;
