import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../tools/namingTools';
import { SMALL, MEDIUM } from '../../constants/sizes';
import Image from '../image/Image';
import './styles/FeatureCard.scss';

const n = createNamespace('FeatureCard');

const FeatureCard = ({
    title,
    description,
    image,
    imageSize,
    withHeading
}) => {
    const renderImage = () => {
        const { alt, url, urlSrcset } = image;

        return (
            <Image
                {...n('image', imageSize).props}
                src={url}
                srcSet={urlSrcset}
                alt={alt}
            />
        );
    };

    return (
        <div {...n('wrapper').props}>
            {image && renderImage()}
            <div {...n('content').props}>
                {title && (
                    <span {...n('title', withHeading && 'heading').withTestId().withE2EId().props}>{title}</span>
                )}
                {description && (
                    <p {...n('description').withTestId().withE2EId().props}>{description}</p>
                )}
            </div>
        </div>
    );
};

const featureCardImageShape = {
    alt: PropTypes.string,
    url: PropTypes.string,
    urlSrcset: PropTypes.shape({
        default: PropTypes.string,
        '1x': PropTypes.string,
        '2x': PropTypes.string
    })
};

FeatureCard.propTypes = {
    title: PropTypes.string,
    description: PropTypes.string,
    image: PropTypes.shape(featureCardImageShape),
    imageSize: PropTypes.oneOf([SMALL.value, MEDIUM.value]),
    withHeading: PropTypes.bool
};

FeatureCard.defaultProps = {
    title: '',
    description: '',
    image: null,
    imageSize: null,
    withHeading: false
};

export default FeatureCard;
