import React from 'react';
import { Box, Grid, Avatar } from 'grommet';

import { Artists } from '../interfaces';

export const Results = ({ artists }: { artists: Artists }) => {
	const {
		name: selectedName,
		image: selectedImage,
		albums: selectedAlbums,
	} = artists[0];

	return (
		<Grid
			rows={['fit', 'fit']}
			columns={['1/4', '3/4']}
			gap='small'
			areas={[
				['artist', 'similar'],
				['discography', 'discography'],
			]}
		>
			<Box gridArea='artist' background='light-5'>
				<Avatar src={selectedImage} />
				<h1>{selectedName}</h1>
			</Box>
			<Box gridArea='similar' background='light-2'>
				<h3>Similar results</h3>
				{artists.map((artist) => (
					<Box gridArea='artist' background='light-5' key={artist.id}>
						<Avatar src={artist.image} />
						<h4>{artist.name}</h4>
					</Box>
				))}
			</Box>
			<Box gridArea='discography' background='brand'>
				<h2>discography</h2>
				{selectedAlbums.map((albums) => (
					<Box gridArea='albums' background='light-5' key={albums.id}>
						<Avatar src={albums.image} />
						<h4>{albums.name}</h4>
					</Box>
				))}
			</Box>
		</Grid>
	);
};