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

function HintItem({ command, name }: { command: string; name: string }) {
	return (
		<Group
			gap={0}
			align='center'
			justify='center'
			style={{
				display: 'flex',
				padding: '8px',
				borderRadius: '10px',
				backgroundColor: 'var(--color-background)',
			}}
		>
			<Text
				style={{
					color: 'var(--color-background)',
					backgroundColor: 'var(--color-text-pri)',
					padding: '8px',
					borderTopLeftRadius: '10px',
					borderBottomLeftRadius: '10px',
				}}
			>
				{command}
			</Text>
			<Text
				style={{
					color: 'var(--color-background)',
					backgroundColor: 'var(--color-text-acc)',
					padding: '8px',
					borderTopRightRadius: '10px',
					borderBottomRightRadius: '10px',
				}}
			>
				{name}
			</Text>
		</Group>
	);
}

export default HintItem;