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

interface SettingsAlertProps {
    text: string;
    type? : 'info' | 'warning' | 'error';
}

export function SettingsAlert(props : SettingsAlertProps) {
    const theme = useMantineTheme();
    const type = props.type || 'warning';
    const colors = useRosettaColors();
    return (
        <Paper withBorder style={{
            borderTop: '1px solid ' + colors.borderColor,
            borderBottom: '1px solid ' + colors.borderColor,
            borderLeft: '1px solid ' + colors.borderColor,
            borderRight: '1px solid ' + colors.borderColor,
        }} color={'red'} p={'lg'}>
            <Flex align={'center'} direction={'column'} justify={'center'}>
                {type == 'warning' && <>
                    <IconAlertTriangleFilled size={48} color={theme.colors.yellow[6]}></IconAlertTriangleFilled>
                </>}
                {type == 'error' && <>
                    <IconAlertTriangleFilled size={48} color={theme.colors.red[6]}></IconAlertTriangleFilled>
                </>}
                {type == 'info' && <>
                    <IconAlertTriangleFilled size={48} color={theme.colors.blue[6]}></IconAlertTriangleFilled>
                </>}
                <Text mt={'sm'} c={'gray'} size={'sm'} ta={'center'}>{props.text}</Text>
            </Flex>
        </Paper>
    );
}