import { useRosettaColors } from "@/app/hooks/useRosettaColors";
import { DeviceEntry } from "@/app/providers/ProtocolProvider/protocol/packets/packet.device.list";
import { Box, Button, Divider, Flex, Text } from "@mantine/core";

export interface DeviceVerifyProps {
    device: DeviceEntry;
}

export function DeviceVerify(props: DeviceVerifyProps) {
    const colors = useRosettaColors();

    return (
        <Box bg={colors.mainColor} h={65}>
            <Divider orientation={'horizontal'} color={colors.borderColor}></Divider>
            <Flex mt={'xs'} mb={'xs'} align={'center'} direction={'column'}>
                <Text size={'xs'} fw={500} c={'dimmed'}>
                    New login from {props.device.deviceName} ({props.device.deviceOs})
                </Text>
                <Flex direction={'row'} mt={'xs'} gap={'md'}>
                    <Button p={0} h={18} variant={'transparent'} size={'xs'}>Accept</Button>
                    <Button p={0} h={18} variant={'transparent'} size={'xs'} color={'red'}>Decline</Button>
                </Flex>
            </Flex>            
        </Box>
    );
}