import { Box, Stack, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { useState } from 'react';
import * as fa6 from 'react-icons/fa6';
import * as si from 'react-icons/si';
import * as vsc from 'react-icons/vsc';
import { boxClasses, textClasses } from 'styles';

function AppItem({ url, icon, name }: { url: string; icon: string; name: string }) {
	const allIcons: any = { ...fa6, ...vsc, ...si };
	const Icon = allIcons[icon];
	const { isMobile } = useCommonHooks();
	const [textDecoration, setTextDecoration] = useState<string>('none');
	const [hover, setHover] = useState<boolean>(false);
	const validUrl =
		url.startsWith('http://') || url.startsWith('https://') ? url : `http://${url}`;
	return (
		<Box
			component='a'
			href={validUrl}
			onMouseOver={() => {
				setTextDecoration('underline');
				setHover(true);
			}}
			onMouseOut={() => {
				setTextDecoration('none');
				setHover(false);
			}}
			className={boxClasses.appItemBox}
			h={'64px'}
		>
			{hover && (
				<svg
					style={{ position: 'absolute', borderRadius: '6px' }}
					height='100%'
					width='100%'
					xmlns='http://www.w3.org/2000/svg'
				>
					<rect rx='8' ry='8' height='100%' width='100%' strokeLinejoin='round' />
				</svg>
			)}
			<Stack
				align={isMobile ? 'center' : undefined}
				justify={isMobile ? 'center' : undefined}
				style={{
					width: isMobile ? '100%' : undefined,
					marginRight: isMobile ? 0 : '1rem',
					marginLeft: isMobile ? 0 : '1rem',
					paddingTop: isMobile ? 0 : '1rem',
				}}
			>
				{Icon && <Icon style={{ height: '2rem', width: '2rem' }} />}
			</Stack>
			<Stack
				justify='center'
				style={{
					overflow: 'hidden',
					whiteSpace: 'nowrap',
					gap: 0,
					flex: 1,
				}}
			>
				<Text className={textClasses.appName} classNames={textClasses}>
					{name}
				</Text>
				<Text
					className={textClasses.appUrl}
					classNames={textClasses}
					style={{
						textDecoration: textDecoration,
					}}
				>
					{url}
				</Text>
			</Stack>
		</Box>
	);
}

export default AppItem;