import { Icon } from '@iconify/react';
import { Box, Stack, Text } from '@mantine/core';
import { useState } from 'react';
import stacks from '../../../styles/Stack.module.css';
import texts from '../../../styles/Text.module.css';

function AppItem({ url, icon, name }: any) {
	const [textDecoration, setTextDecoration] = useState<string>('none');

	return (
		<Box
			component='a'
			href={`https://${url}`}
			onMouseOver={() => setTextDecoration('underline')}
			onMouseOut={() => setTextDecoration('none')}
			className={stacks.appItemBox}
		>
			<Stack
				style={{
					height: '64px',
					marginRight: '1em',
					marginLeft: '1em',
					paddingTop: '15px',
				}}
			>
				<Icon icon={`mdi:${icon}`} height={32} width={32} />
			</Stack>
			<Stack
				style={{
					display: 'flex',
					flexDirection: 'column',
					justifyContent: 'center',
					flex: 1,
					overflow: 'hidden',
					gap: 0,
				}}
			>
				<Text className={texts.appName}>{name}</Text>
				<Text
					className={texts.appUrl}
					style={{
						textDecoration: textDecoration,
					}}
				>
					{url}
				</Text>
			</Stack>
		</Box>
	);
}

export default AppItem;