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

const n = createNamespace('Testimonial');

const Testimonial = ({
    job,
    author,
    iconAlt,
    iconUrl,
    iconSrcset,
    testimonial,
    i18n
}) => {
    if (!testimonial) {
        return null;
    }

    return (
        <div {...n('wrapper').props}>
            {iconUrl && (
                <div {...n('icon').props}>
                    <Image src={getImageSrc(iconUrl, iconSrcset)} alt={iconAlt} />
                </div>
            )}
            {(author || job) && (
                <div {...n('header').props}>
                    {author && <div {...n('author').props}>{author}</div>}
                    {job && <div {...n('job').props}>{job}</div>}
                </div>
            )}
            {testimonial && (
                <div {...n('description').props}>
                    <p>{testimonial}</p>
                </div>
            )}
            <div {...n('button').props}>
                <Button>{i18n.button}</Button>
            </div>
        </div>
    );
};

Testimonial.propTypes = {
    author: PropTypes.string,
    job: PropTypes.string,
    testimonial: PropTypes.string,
    iconAlt: PropTypes.string,
    iconUrl: PropTypes.string,
    iconSrcset: PropTypes.shape({
        default: PropTypes.string,
        '1x': PropTypes.string,
        '2x': PropTypes.string
    }),
    i18n: PropTypes.shape({
        button: PropTypes.string
    })
};

Testimonial.defaultProps = {
    author: 'John Doe',
    job: null,
    testimonial: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae tortor aliquet, tempus dolor non, imperdiet eros. Aliquam erat volutpat.',
    iconAlt: null,
    iconUrl: null,
    iconSrcset: {},
    i18n: {
        button: 'Read more'
    }
};

export default Testimonial;
