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

export const Other = ({ image, name }: { image: string; name: string }) => {
	return (
		<Box round='xxsmall' overflow='hidden' align='center' pad='small'>
			<Heading
				level='4'
				margin={{ bottom: 'small', top: 'small', left: 'small' }}
			>
				{name}
			</Heading>
			<Box
				height='small'
				width='small'
				round='full'
				background={{
					repeat: 'no-repeat',
					size: 'cover',
					image: `url(${image})`,
				}}
			/>
		</Box>
	);
};