import React from "react";
import { apiClient } from "../utils/httpClients";
import HomeCarousel from "../components/HomeCarousel";
import MatchInfoCardDisplay from "../components/MatchInfoCardDisplay";
export default class Welcome extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            displayedMatches: [],
        };
    }

    async componentDidMount() {
        await this.latestMatches();

    }

    async latestMatches() {
        let recentMatchesRes = await apiClient.get("/match/recent/15");
        if (recentMatchesRes.status === 200) {
            this.setState({ displayedMatches: recentMatchesRes.data.recent });
        }
    }

    render() {
        return (
            <div className="page-root">
                <HomeCarousel />
                <div className="text-center p-3 mt-2">
                    <h2>Why?</h2>
                    <p>Because you want to play the sports you love while meeting new friends!</p>
                    {/* TODO: All this text should be expanded on. */}
                </div>
                <hr />
                <div className="p-4">
                    <h2>Available Matches</h2>
                    <MatchInfoCardDisplay recommendedmatches={this.state.displayedMatches} />
                </div>
            </div>
        );
    }
}