import { Box, Group, Stack } from '@mantine/core';
import { boxClasses } from 'styles';
import type { Theme } from 'types';

export function MiniGroupItem({ cardTheme }: { cardTheme: Theme }) {
	return (
		<Box className={boxClasses.bookmarkItemExampleText}>
			<Group w={'100%'} justify='space-between'>
				<Stack gap={4} align='start'>
					<Box
						style={{
							height: '2px',
							width: '25px',
							backgroundColor: cardTheme.accentColor,
							borderRadius: '4px',
						}}
					/>
					<Box
						style={{
							height: '2px',
							width: '33px',
							backgroundColor: cardTheme.primaryColor,
							borderRadius: '4px',
						}}
					/>
					<Box
						style={{
							height: '2px',
							width: '38px',
							backgroundColor: cardTheme.primaryColor,
							borderRadius: '4px',
						}}
					/>
					<Box
						style={{
							height: '2px',
							width: '28px',
							backgroundColor: cardTheme.primaryColor,
							borderRadius: '4px',
						}}
					/>
				</Stack>
			</Group>
		</Box>
	);
}