import { Avatar, Flex, Text, useMantineTheme } from "@mantine/core";
import { useRosettaColors } from "@/app/hooks/useRosettaColors";
import { useAvatars } from "@/app/providers/AvatarProvider/useAvatars";
import { Mention } from "./MentionList";

interface MentionRowProps extends Mention {
    selected?: boolean;
}

export function MentionRow(props : MentionRowProps) {
    const colors = useRosettaColors();
    const avatars = useAvatars(props.publicKey, false);
    const theme = useMantineTheme();

    return (
        <Flex align={'center'} bg={props.selected ? theme.colors.blue[8] + "10" : undefined} style={{
            cursor: 'pointer'
        }} gap={'sm'} p={'xs'} direction={'row'}>
            {props.username == 'all' && <Avatar title="@" variant="filled" color={colors.brandColor}>@</Avatar>}
            {props.username == 'admin' && <Avatar title="@" variant="filled" color={colors.error}>@</Avatar>}
            {props.username != 'all' && props.username != 'admin' && <Avatar 
                title={props.title} 
                variant="filled" 
                color="initials"
                src={avatars.length > 0 ? avatars[0].avatar : null}
            ></Avatar>}
            <Flex direction={'column'}>
                <Flex justify={'row'} align={'center'} gap={3}>
                    <Text size="sm" fw={500}>
                        {props.username == 'all' && 'All users'}
                        {props.username == 'admin' && 'Administrator'}
                        {props.username != 'all' && props.username != 'admin' && props.title}
                    </Text>
                </Flex>
                <Text size={'xs'} c={'dimmed'}>@{props.username}</Text>
            </Flex>
        </Flex>
    )
}