import { useRosettaColors } from "@/app/hooks/useRosettaColors";
import { useDialog } from "@/app/providers/DialogProvider/useDialog";
import { Menu } from "@mantine/core";
import { IconAlertCircle, IconRefresh, IconTrash } from "@tabler/icons-react";

interface MessageErrorProps {
    text: string;
    messageId: string;
}

export function MessageError(props : MessageErrorProps) {
    const colors = useRosettaColors();
    const {sendMessage, deleteMessageById} = useDialog();

    const retry = async () => {
        deleteMessageById(props.messageId);
        sendMessage(props.text, []);
    }

    const remove = () => {
        deleteMessageById(props.messageId);
    }

    return (
        <>
            <Menu withArrow shadow="md" width={170}>
                <Menu.Target>
                    <IconAlertCircle stroke={3} size={15} color={colors.error}></IconAlertCircle>
                </Menu.Target>
                <Menu.Dropdown>
                    {props.text.trim() != "" && <Menu.Item onClick={retry} leftSection={<IconRefresh size={14} />}>
                        Retry
                    </Menu.Item>  } 
                    <Menu.Item
                    color="red" onClick={remove}
                    leftSection={<IconTrash size={14} />}
                    >
                        Remove
                    </Menu.Item>                             
                </Menu.Dropdown>
            </Menu>
        </>
    );
}