import { Card, Stack, Text } from '@mantine/core';
import { FaLaptop } from 'react-icons/fa';
import { cardClasses } from 'styles';
import type { GuacamoleClient } from 'types';

function GuacamoleClientSettingsItem({ client }: { client: GuacamoleClient }) {
	return (
		<Card
			className={cardClasses.settingsItemHover}
			classNames={cardClasses}
			h={200}
			w={'100%'}
		>
			<Stack align='center' gap={0}>
				<FaLaptop fontSize={100} />
				<Text fz={'1.5rem'}>{client.clientName}</Text>
				<Text fz={'1.25rem'}>{client.clientIdentifier}</Text>
			</Stack>
		</Card>
	);
}

export default GuacamoleClientSettingsItem;