import { Container, Row, Col } from "react-bootstrap";
import AdminTemplate from "../../templates/AdminTemplate";
import { useNavigate } from "react-router-dom";
import { useEffect } from "react";
import DataStorage from "../../organisms/DataStorage";

import SummaryReport from "../../organisms/SummaryReport";

export default function AdminSummaryPage() {

    const navigate = useNavigate();

    useEffect(() => {
        if (!DataStorage.get('isLoggedInAdmin')) {
            navigate('/admin-login');
        }
    }, [navigate]);

    return (
        <AdminTemplate content={
            (
                <Container className='d-flex text-center align-items-center justify-content-center' style={{ minHeight: '80vh' }}>
                    <Row className="align-items-center">
                        <Col xs={12}>
                            <h1>This is a demo summary page</h1>
                        </Col>
                        <Col xs={12}>
                            <h3>In the future, we hope to connect to PowerBI API and show the dashboard</h3>
                        </Col>
                        <Col xs={12} className='d-flex flex-column align-items-center'>
                            <SummaryReport/>
                        </Col>
                    </Row>
                </Container>
            )
        } />
    );
}