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

const n = createNamespace('resourceCard');
const iconText = 'PDF';
const linkText = 'Download PDF';

const ResourceCard = ({ link, cardTitle, info, resourceType, sizeClass }) => (
    <div {...n('container').props}>
        <iframe {...n('iframe', sizeClass).withTestId().props} title={link} scrolling="no" src={`${link}#view=FitH`} />
        <div {...n('header').withTestId().withE2EId().props}>
            {resourceType === 'PDF_UPLOAD'
                ? <a {...n('pdfLink').withTestId().props} href={`${link}#view=FitH`} rel="noopener noreferrer" target="_blank">{cardTitle}</a>
                : cardTitle}
        </div>
        <div {...n('textSection', sizeClass).withTestId().withE2EId().props}>
            {info}
        </div>
        {resourceType === 'PDF_UPLOAD'
        && (
            <div {...n('pdf').withTestId().props}>
                <a {...n('linkGroup').withTestId().props} href={link} download>
                    <span {...n('icon').withTestId().props}>{iconText}</span>
                    <span {...n('linkText').withTestId().props}>{linkText}</span>
                </a>
            </div>
        )}
    </div>
);

ResourceCard.propTypes = {
    link: PropTypes.string,
    cardTitle: PropTypes.string,
    info: PropTypes.string,
    width: PropTypes.string,
    height: PropTypes.string,
    resourceType: PropTypes.string,
    sizeClass: PropTypes.string
};

ResourceCard.defaultProps = {
    link: '#',
    info: 'Info',
    cardTitle: 'Title',
    width: '412px',
    height: '232px',
    resourceType: 'VIDEO',
    sizeClass: 'size-3'
};

export default ResourceCard;
