import React from 'react';
import { Box, Text } from 'grommet';

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

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

	return (
		<Box
			round='xxsmall'
			pad='xsmall'
			onClick={() => handleClick(name)}
			width='130px'
		>
			<Box
				height='120px'
				width='120px'
				round='full'
				background={{
					repeat: 'no-repeat',
					size: 'cover',
					image: `url(${image})`,
				}}
			/>
			<Text
				margin={{ bottom: 'small', top: 'small', left: 'small' }}
				textAlign='center'
				weight='bold'
				wordBreak='break-word'
			>
				{name}
			</Text>
		</Box>
	);
};