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

export enum WindDirection {
	N = 0,
	NE = 45,
	E = 90,
	SE = 135,
	S = 180,
	SW = 225,
	W = 270,
	NW = 315,
}

export default function SmallOutlookCard({ weather }: any) {
	return (
		<Center display={'flex'}>
			<Box pos={'relative'} style={{ zIndex: -1 }}>
				<Image radius={'lg'} src={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'}>
				<Stack gap={0} align='center' pos={'absolute'} right={0} top={0}>
					<Center>
						<Icon
							icon={'mdi:navigation'}
							style={{
								position: 'absolute',
								transform: `rotate(${WindDirection[weather.windDirection]}deg)`,
							}}
						/>
						<Icon fontSize={32} icon={'mdi:circle-outline'} />
					</Center>
					<Text mt={-6} fz={12}>
						{weather.windSpeed}
					</Text>
				</Stack>
				<Stack gap={0} pos={'absolute'} bottom={8}>
					<Text mt={-4} mb={-4} fz={14}>
						Precip:
					</Text>
					<Text mt={-8} mb={-8} p={0} fz={24}>
						{weather.precipitation}%
					</Text>
					<Text mt={-4} mb={-4} fz={14}>
						{weather.isDayTime ? 'High of:' : 'Low of:'}
					</Text>
					<Text mt={-8} mb={-8} p={0} fz={36}>
						{weather.temperature}°F
					</Text>
				</Stack>
			</Stack>
		</Center>
	);
}