import { Group, Text } from '@mantine/core';
import type { Theme } from 'types';
function ThemeMiniCard({
	allThemes,
	item,
}: {
	allThemes: Theme[];
	item: number;
}) {
	const theme = allThemes.find((theme: Theme) => theme.id === item);

	return (
		<Group
			gap={0}
			align='center'
			justify='center'
			display={'grid'}
			pos={'relative'}
			w={'175px'}
			h={'60px'}
			style={{
				background: `linear-gradient(${theme?.backgroundColor}33, ${theme?.backgroundColor}33), no-repeat center url(/backgrounds/${theme?.backgroundImage})`,
				backgroundSize: 'cover',
				backgroundColor: theme?.backgroundColor,
				border: `solid ${theme?.borderColor}`,
				borderRadius: '8px',
			}}
		>
			<Text
				bg={theme?.backgroundColor}
				c={theme?.primaryColor}
				size='md'
				style={{
					padding: 4,
					borderRadius: '8px',
				}}
			>
				{allThemes.find((theme: Theme) => theme.id === item)?.name}
			</Text>
		</Group>
	);
}

export default ThemeMiniCard;