import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import WhiteAreaOfCard from './WhiteAreaOfCard.js';

export default function ResourceCard(props) {
	return(
		<Anchor
			to={'/recurso?id='+props.id
					+'&name='+props.name}
		>
			<CardPaper elevation={3}>
				<Grid container
					direction="row"
					justify="flex-start"
					alignItems="center"
				>
					<Grid item>
						<Img src="https://api.portalmec.c3sl.ufpr.br/system/learning_objects/thumbnails/000/032/128/original/1427119781385_thumb_w300_h160.jpg?1544253610" />
					</Grid>
					<Grid item>
						<WhiteAreaOfCard name={props.name} likes={props.likes} />
					</Grid>
				</Grid>
			</CardPaper>
		</Anchor>
	);
}

const CardPaper=styled(Paper)`
	width: 312px;
	height: 100px;
	margin-bottom: 15px;
	margin-left: 20px;
	margin-right: 20px;
`
const Img=styled.img`
	height: 100px;
	width: 150px;
`
const Anchor=styled(Link)`
	text-decoration: none !important;
	color: inherit !important;
`