import Card from "../components/Card";
import "./Index.css";

const Index = (props) => {
    const response = props.response;
    if (response.loading) {
        return <div>Loading...</div>;
    }

    const data = response.data;

    const latest = data[data.length - 1];

    return (
        <div>
            <div>
                <div className="Message">
                    This site shows data from the 2021 Fall and 2022 Spring semesters. For the latest data, visit{" "}
                    <a href="https://ritcoviddashboard.com/">ritcoviddashboard.com</a>
                </div>
            </div>
            <div className="Section" id="total">
                <div className="Title">Total Positive Cases Since August 24 (First Day of Classes)</div>
                <div className="Cards">
                    <Card name="Students" link="/totalstudents" latest={latest["total_students"]} />
                    <Card name="Staff" link="/totalstaff" latest={latest["total_staff"]} />
                </div>
            </div>

            <div className="Section" id="new">
                <div className="Title">New Positive Cases From Past 14 Days</div>
                <div className="Cards">
                    <Card name="Students" link="/newstudents" latest={latest["new_students"]} />
                    <Card name="Staff" link="/newstaff" latest={latest["new_staff"]} />
                </div>
            </div>
        </div>
    );
};

export default Index;