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

import './styles/CompareProductScreenshots.scss';

const n = createNamespace('CompareProductScreenshots');

export const CompareProductScreenshots = ({
    screenshots,
    name
}) => (
    <div {...n('wrapper').withTestId().props}>
        {screenshots && screenshots.map(screenshot => (
            <Image
                className={n('image').props.className}
                src={screenshot.imageUrl}
                srcSet={screenshot.imageUrlSrcset}
                alt={name}
                key={screenshot.imageUrl}
            />
        ))}
    </div>
);

CompareProductScreenshots.isRenderable = item => item.screenshots && item.screenshots.length;

CompareProductScreenshots.propTypes = {
    screenshots: PropTypes.arrayOf(
        PropTypes.shape({
            imageUrl: PropTypes.string,
            imageUrlSrcset: PropTypes.shape({
                default: PropTypes.string,
                '1x': PropTypes.string,
                '2x': PropTypes.string
            })
        })
    ),
    name: PropTypes.string
};

CompareProductScreenshots.defaultProps = {
    screenshots: [],
    name: ''
};
