import { useRosettaColors } from "@/app/hooks/useRosettaColors";
import { Box, Flex, Text } from "@mantine/core";
import { IconX } from "@tabler/icons-react";

export function AttachmentError() {
    const colors = useRosettaColors();
    return (
        <Box style={{
            border: `1px solid ${colors.borderColor}`,
            borderRadius: '8px',
            padding: '12px',
            backgroundColor: colors.mainColor,
        }}>
            <Flex direction={'row'} gap={'sm'} align={'center'}>
                <IconX size={30} color={colors.error}></IconX>
                <Text size={'xs'}>
                    This attachment is no longer available because it was sent for a previous version of the app.
                </Text>
            </Flex>
        </Box>
    );
}