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

import placeholder from '../assets/placeholder-music.jpg';

export const Album = ({ image, name }: { image: string; name: string }) => {
	// Load placeholder image if none provided
	if (!image) {
		image = placeholder;
	}

	return (
		<Box round='xxsmall' elevation='small' overflow='hidden'>
			<Box height='300px'>
				<Image src={image} fit='cover' />
			</Box>
			<Heading
				level='4'
				margin={{ bottom: 'small', top: 'small', left: 'small' }}
			>
				{name}
			</Heading>
		</Box>
	);
};