import React from 'react';
import { Box, Heading, Image } from 'grommet';

export const Card = ({ image, name }: { image: string; name: string }) => {
	return (
		<Box round='xxsmall' elevation='small' overflow='hidden'>
			<Box height='300px'>
				<Image src={image} fit='cover' />
			</Box>

			<Box pad={{ horizontal: 'small' }}>
				<Box
					margin={{ top: 'small' }}
					direction='row'
					align='center'
					justify='between'
				>
					<Box>
						<Heading level='4' margin={{bottom: "small", top : "xsmall"}}>
							{name}
						</Heading>
					</Box>
				</Box>
			</Box>
		</Box>
	);
};
