import { Box } from "@mantine/core";
import { IconX } from "@tabler/icons-react";
import { DialogAttachmentProps } from "./DialogAttachment";
import { useRosettaColors } from "@/app/hooks/useRosettaColors";


export function AttachImage (props : DialogAttachmentProps) {
    const colors = useRosettaColors();
    return (
        <Box style={{
            maxWidth: 100,
            maxHeight: 70,
            position: 'relative'
        }}
         key={props.attach.id}>
            <img style={{
                maxWidth: 100,
                maxHeight: 70,
                borderRadius: 8,
                userSelect: 'none'
            }} src={props.attach.blob}>
            </img>
            {props.onRemove && 
                <Box bg={colors.error} style={{
                    position: 'absolute',
                    top: -5,
                    right: -5,
                    borderRadius: '50%',
                    cursor: 'pointer',
                    height: 18,
                    width: 18,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                }}
                onClick={() => {
                    props.onRemove && props.onRemove(props.attach);
                }}>
                    <IconX size={13} stroke={2} color="white"></IconX>
                </Box>
            }
        </Box>        
    );
}