import {Card, Grid} from "@mui/material";
import React from "react";
import ChampionshipCardContent from "./ChampionshipCardContent";
import ChampionshipCardAction from "./ChampionshipCardAction";

const ChampionshipCard = ({champ}) => {
    return (
        <Grid item xs={12} sm={6} md={4} key={champ.id}>
            <Card variant="outlined" sx={{
                height: '100%',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'space-between', // Растягивает содержимое, прижимает actions вниз
                transition: 'transform 0.2s',
                '&:hover': {
                    transform: 'scale(1.02)'
                }
            }}>
                <ChampionshipCardContent champ={champ}/>
                <ChampionshipCardAction champId={champ.id}/>
            </Card>
        </Grid>
    )
}

export default ChampionshipCard;