import {Button, Grid, Paper, Typography} from "@mui/material";
import React from "react";
import ChampionshipCard from "./ChampionshipCard";
import {CHAMPIONSHIP_STAGES} from "../../data/constants";

const ChampionshipsList = () => {
    return (
        <>
            <Grid container spacing={4}>
                {CHAMPIONSHIP_STAGES.map((champ) => <ChampionshipCard champ={champ}/>)}
            </Grid>

            {/* Сообщение, если чемпионатов нет */}
            {CHAMPIONSHIP_STAGES.length === 0 && (
                <Paper sx={{textAlign: 'center', py: 8}}>
                    <Typography color="text.secondary">
                        Пока нет ни одного чемпионата. Создайте первый!
                    </Typography>
                    <Button
                        variant="outlined"
                        sx={{mt: 2}}
                        href="/championships/create"
                    >
                        Создать чемпионат
                    </Button>
                </Paper>
            )}
        </>
    )
}

export default ChampionshipsList;