import { Icon } from '@iconify/react/dist/iconify.js';
import { Box, Center, Group, Image, Overlay, Stack, Text } from '@mantine/core';

export default function SmallWeatherCard({ weather }: any) {
	return (
		<Center display={'flex'}>
			<Box pos={'relative'} style={{ zIndex: -1 }}>
				<Image
					w={'134px'}
					h={'134px'}
					radius={'lg'}
					src={weather.icon === '' ? undefined : weather.icon}
				/>
				<Overlay
					color='black'
					gradient='linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0.35))'
					zIndex={0}
					radius={'lg'}
				/>
			</Box>
			<Stack h={'124px'} w={'124px'} gap={0} pos={'absolute'}>
				<Text mb={-8} p={0} fz={12} style={{ color: 'white' }}>
					{weather.highTemp}°F/{weather.lowTemp}°F
				</Text>
				<Stack gap={0} align='center' pos={'absolute'} right={0} top={0}>
					{weather.precipitation !== 'N/A' && (
						<Group gap={0}>
							<Icon color={'white'} icon={'mdi:weather-pouring'} height={32} width={32} />
							<Text style={{ color: 'white' }}>{weather.precipitation} mm</Text>
						</Group>
					)}
					{weather.precipitation === 'N/A' && (
						<Icon
							icon={'mdi:white-balance-sunny'}
							height={32}
							width={32}
							color={'white'}
						/>
					)}
					<Center>
						<Icon
							icon={'mdi:navigation'}
							color='white'
							style={{
								position: 'absolute',
								transform: `rotate(${weather.windDirection}deg)`,
							}}
						/>
						<Icon fontSize={32} icon={'mdi:circle-outline'} color='white' />
					</Center>
					<Text mt={-6} fz={12} style={{ color: 'white' }}>
						{weather.windSpeed} mph
					</Text>
				</Stack>
				<Stack gap={0} pos={'absolute'} bottom={8}>
					<Text mt={-8} mb={-8} p={0} fz={36} style={{ color: 'white' }}>
						{weather.temperature}°F
					</Text>
					<Text mt={-8} fz={12} style={{ color: 'white' }}>
						Feels like: {weather.heatIndex}°F
					</Text>
					<Text mt={-6} fz={12} style={{ color: 'white' }}>
						Humidity: {weather.humidity}%
					</Text>
				</Stack>
			</Stack>
		</Center>
	);
}