import { __ } from '@wordpress/i18n';
import { Box, Flex, Heading, Text, Badge } from '@chakra-ui/react';

/**
 * VulnerabilityItem Component
 * Displays a single vulnerability with details
 */
function VulnerabilityItem( { vulnerability, software } ) {
	const isPatched = vulnerability.software?.[ 0 ]?.patched || false;
	const isVulnerable = ! isPatched;

	return (
		<Box
			bg="red.50"
			borderLeft="4px solid"
			borderColor="red.500"
			borderRadius="0 8px 8px 0"
			p={ 4 }
			mb={ 3 }
		>
			<Flex justify="space-between" align="flex-start" gap={ 4 }>
				<Box flex="1">
					<Heading
						as="h3"
						fontSize="sm"
						fontWeight="semibold"
						color="gray.900"
						mb={ 1 }
					>
						{ vulnerability.title }
					</Heading>
					<Text fontSize="sm" color="gray.600" mb={ 2 }>
						Published:{ ' ' }
						{ new Date(
							vulnerability.published
						).toLocaleDateString( 'en-US', {
							year: 'numeric',
							month: 'short',
							day: 'numeric',
						} ) }
					</Text>

					<Flex
						align="center"
						gap={ 1 }
						fontSize="xs"
						color="gray.500"
						mb={ 1 }
					>
						<Text>
							<Text as="span" fontWeight="medium">
								Your version:
							</Text>
							<Text as="span" ml={ 2 }>
								{ software.version }
							</Text>
						</Text>
					</Flex>

					{ vulnerability.software?.[ 0 ]?.patched_versions?.length >
						0 && (
						<Flex
							align="center"
							gap={ 1 }
							fontSize="xs"
							color="gray.500"
							mb={ 1 }
						>
							<Text>
								<Text as="span" fontWeight="medium">
									Fixed in:
								</Text>
								<Text as="span" ml={ 2 }>
									{
										vulnerability.software[ 0 ]
											.patched_versions[
											vulnerability.software[ 0 ]
												.patched_versions.length - 1
										]
									}
								</Text>
							</Text>
						</Flex>
					) }

					<Flex
						align="center"
						gap={ 1 }
						fontSize="xs"
						color="gray.500"
					>
						<Text>
							<Text as="span" fontWeight="medium">
								ID:
							</Text>
							<Text as="span" ml={ 2 } fontFamily="mono">
								{ vulnerability.id }
							</Text>
						</Text>
					</Flex>
				</Box>

				{ isVulnerable && (
					<Badge
						colorScheme="red"
						fontSize="xs"
						px={ 3 }
						py={ 1 }
						borderRadius="lg"
						bg="red.100"
						color="red.800"
					>
						{ __( 'Your version is vulnerable', 'anti-spam' ) }
					</Badge>
				) }
			</Flex>
		</Box>
	);
}

export default VulnerabilityItem;
