content: import React from 'react';
  import MediaQuery from 'react-responsive';
  import groupRepo from 'infra/repo/group';
  import loc from 'infra/service/location';
  
  const selectGroup = groupId => e => {
    e.preventDefault();
    groupRepo.selectGroup(groupId)
      .then(() => loc.push('/group/feed'));
  }
  
  const Card = props => {
    const { id, name, cover, owner, privacy } = props;
    return (
      <div>
        <MediaQuery minDeviceWidth={320} maxWidthDevice={736} minWidth={320} maxWidth={736}>
          {(matches) => {
            const cardStyleOnMobile = matches ? { width: '100%', float: 'left' } : { width: '20rem', float: 'left' };
            return (
              <div className={`card ${matches ? '' : 'mr-1'}`} style={cardStyleOnMobile}>
                <div className="card-img-top" style={{
                  height: '100px',
                  backgroundImage: `url("${cover}")`,
                  backgroundSize: 'cover',
                  backgroundRepeat: 'no-repeat',
                  backgroundPosition: '50% 50%',
                }}></div>
                <div className="card-block">
                  <p><b>{name}</b></p>
                  <span className="mr-1"><i className="fa fa-lock"></i> {privacy}</span>
                  {owner ? <span className="mr-1"><i className="fa fa-user"></i> {owner.name}</span> : ''}
                </div>
                <div className="card-block pt-0" style={{ textAlign: 'right' }}>
                  <a href={`https://www.facebook.com/groups/${id}/`} target="_blank" className="btn btn-primary btn-sm">Open in FB</a>
                  &nbsp;
                  <a onClick={selectGroup(id)} className="btn btn-primary btn-sm no-href-link">Select</a>
                </div>
              </div>
            );
          }}
        </MediaQuery>
      </div>
    );
  }
  
  export default Card;
  