import { useRosettaColors } from "@/app/hooks/useRosettaColors";
import { Popover, Text } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { IconLock } from "@tabler/icons-react";

export function PopoverLockIconAvatar() {
    const [opened, { close, open }] = useDisclosure(false);
    const colors = useRosettaColors();

    return (
        <Popover opened={opened} withArrow position="top">
            <Popover.Target>
                <IconLock onMouseEnter={open} onMouseLeave={close} size={12} stroke={2} color={colors.success}></IconLock>
            </Popover.Target>
            <Popover.Dropdown>
                <Text size={'xs'} c={'dimmed'}>This avatar is end-to-end encrypted</Text>
            </Popover.Dropdown>
        </Popover>
    )
}