import { PacketSearchUser } from "@/app/providers/ProtocolProvider/protocol/packets/packet.search";
import { Avatar, Flex, Text } from "@mantine/core";
import classes from './SearchRow.module.css'
import { VerifiedBadge } from "../VerifiedBadge/VerifiedBadge";
import { useAvatars } from "@/app/providers/AvatarProvider/useAvatars";

interface SearchRowProps {
    user: PacketSearchUser;
    onDialogClick: (publicKey: string) => void;
}

export function SearchRow(props: SearchRowProps) {
    const avatars = useAvatars(props.user.publicKey, false);
    return (
        <Flex onContextMenu={() => props.onDialogClick(props.user.publicKey)} onClick={() => props.onDialogClick(props.user.publicKey)} className={classes.search_item} p={'sm'} direction={'row'} gap={'sm'}>
            <Avatar
                size={'md'}
                color={'initials'}
                name={props.user.title || props.user.publicKey}
                src={avatars.length > 0 ? avatars[0].avatar : undefined}
            ></Avatar>
            <Flex direction={'column'}>
                <Flex gap={3} align={'center'}>
                    <Text fz={12}>{props.user.title || props.user.publicKey.slice(0, 10)}</Text>
                    {props.user.verified > 0 && <VerifiedBadge hideTooltip size={15} verified={props.user.verified}></VerifiedBadge>}
                </Flex>
                <Text fz={10} c="dimmed">@{props.user.username || props.user.publicKey.slice(0, 10) +  "..."}</Text>
            </Flex>
        </Flex>
    )
}