import { Group, Text } from '@mantine/core';
import type { Theme } from 'types';

export function ThemeMiniCard({ miniTheme }: { miniTheme: Theme | undefined }) {
	return (
		<Group
			gap={0}
			align='center'
			justify='center'
			display={'grid'}
			pos={'relative'}
			w={'175px'}
			h={'60px'}
			style={{
				backgroundImage:
					miniTheme?.backgroundImage.toLocaleLowerCase() !== 'none'
						? `linear-gradient(${miniTheme?.backgroundColor}33, ${miniTheme?.backgroundColor}33), url(../../api/backgroundImages/${miniTheme?.backgroundImage})`
						: undefined,
				backgroundSize:
					miniTheme?.backgroundImage.toLocaleLowerCase() !== 'none' ? 'cover' : undefined,
				backgroundColor:
					miniTheme?.backgroundImage.toLocaleLowerCase() === 'none'
						? miniTheme?.backgroundColor
						: undefined,
				backgroundPosition: 'center',
				border: `solid ${miniTheme?.borderColor}`,
				borderRadius: '8px',
			}}
		>
			<Text
				bg={miniTheme?.backgroundColor}
				c={miniTheme?.primaryColor}
				size='md'
				style={{
					padding: '.25rem',
					borderRadius: '8px',
				}}
			>
				{miniTheme?.name}
			</Text>
		</Group>
	);
}