import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';

const Frame = (props) => {
    return(
        <svg 
            id={props.id}
            className={cx(
                'Frame', 
                'h-auto',
                'mw-100p',
                { 'Image--shadow': props.shadow }
            )}
            xmlns='http://www.w3.org/2000/svg' 
            xmlnXlink='http://www.w3.org/1999/xlink'
            viewBox='0 0 520 460'
            width='520' height='460'
            aria-labelledby={props.titleid}
        >
            <title id={props.titleid}>{props.title}</title>
            <defs>
                <linearGradient id='Frame-gradient' x1='55' x2='359' y1='97' y2='97' gradientUnits='userSpaceOnUse'>
                    <stop offset='0' className='Frame-gradientStop1'/>
                    <stop offset='.5' className='Frame-gradientStop2'/>
                    <stop offset='1' className='Frame-gradientStop3'/>
                </linearGradient>
                <clipPath id='Frame-clip'>
                    <path d='M72.9 499.7l482-48.2V40.4l-482 48.2z'/>
                </clipPath>
            </defs>
            <image width='480' height='460' x='75' y='41' clipPath='url(#Frame-clip)' xlinkHref={props.src}/>
            { (props.playbutton) ? <g className='lift'><circle className='c--link'  fill='currentColor' cx='272' cy='231' r='39'opacity='.8'/><path className='c--neutral-0' fill='currentColor' d='M262.6 243.9l24.8-12.4-24.8-12.5z' opacity='.8'/></g> : null }
            
            <path id='d' fill='url(#Frame-gradient)' d='M1 94.3V49.6l303-29.8v45z'/>
            <use width='100%' height='100%' transform='translate(215 363)' xlinkHref='#d'/>
        </svg>
    );
};

Frame.propTypes = {
    id: PropTypes.string,
    modifier: PropTypes.string,
    playbutton:  PropTypes.bool,
    shadow: PropTypes.bool,
    src: PropTypes.string,
    title: PropTypes.string,
    titleid: PropTypes.string
};

export default Frame;