import React from 'react';
import { Text, Button, Group } from '@mantine/core';
import { useNavigate, useParams } from 'react-router-dom';

const WhiteboardOutdatedFallback = () => {
    const navigate = useNavigate();
    const { id } = useParams();
    const isAdmin = window?.appLocalizer?.is_admin;

    return (
        <div
            className={`${isAdmin ? 'h-[calc(100vh-292px)]' : 'h-[calc(100vh-245px)]'}`}
            style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '0 20px', textAlign: 'center' }}
        >
            <Text size="xl" weight={700}>Whiteboard Unavailable</Text>
            <Text c="dimmed" mt="md" style={{ maxWidth: 560 }}>
                The Whiteboard add-on installed on this site is an older version that isn&apos;t compatible with the current plugin. Please ask your Admin to update the Whiteboard add-on to our latest version to continue.
            </Text>
            <Group justify="center" mt="xl" gap="sm">
                <Button variant="default" onClick={() => navigate(`/project/task/list/${id}`)}>
                    Back to Project
                </Button>
            </Group>
        </div>
    );
};

export default WhiteboardOutdatedFallback;