import playIcon from '../../assets/img/icon/play.svg'

function VideoCard({
    cols = 'strb-col-lg-4',
    img_src = '', 
    title = 'Go somewhere',
    link = '#',
    onPopup
}) {

    const handleClick = (e) =>  {
        e.preventDefault();
        onPopup(link);
    }

    return (
        <div className={cols}>
            <div className="strb-tutorial-item">
                <div className="strb-tutorial-thumb">
                    <img src={img_src} alt=""/>
                    <div className="strb-tutorial-play">
                        <a href={link} className="strb-tutorial-play-btn" target='_blank' onClick={handleClick}>
                            <img src={playIcon} alt=""/>
                        </a>
                    </div>
                </div>
                <div className="strb-tutorial-content">
                    <h4 className="strb-tutorial-title">{title}</h4>
                </div>
            </div>
        </div>
    )
}

export default VideoCard