import React from 'react'
import {Flex, HStack, Image, Stack, Text} from '@chakra-ui/react';
import {userLight} from '../../images/index'

function UserLogoutComponent(props: any) {
    const {secondaryColor, username, onLogout} = props;

    return (
        <Flex justify="space-between" color="white" alignItems="center">
            <HStack spacing="10px" cursor="pointer" alignItems="center">
                <Image src={userLight} height="24px" width="24px"/>
                <Text
                    fontFamily={"Inter"}
                    fontSize={"13px"}
                    fontStyle={"normal"}
                    fontWeight={"700"}
                    lineHeight={"18px"}
                    letterSpacing={"0em"}
                    textAlign={"left"}
                    color={secondaryColor}

                >
                    {username}
                </Text>


            </HStack>
            <Stack pr="51px">
                <Text
                    fontFamily={"Inter"}
                    fontSize={"13px"}
                    fontStyle={"normal"}
                    fontWeight={"700"}
                    lineHeight={"18px"}
                    letterSpacing={"0em"}
                    textAlign={"left"}
                    cursor={"pointer"}
                    color={secondaryColor}
                    onClick={onLogout}

                >
                    Logout
                </Text>
            </Stack>
        </Flex>

    );
}

export default UserLogoutComponent;