import {Card, CardActions, CardContent} from "@mui/material";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import {Link} from "react-router-dom";
import * as React from "react";
import {Trophy} from "@phosphor-icons/react";


const AnnounceCard = ({champ}) => {
    return (
        <Card variant="outlined" sx={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between', // Растягивает содержимое, прижимает actions вниз
            height: '100%',
            transition: 'transform 0.2s',
            '&:hover': {transform: 'scale(1.02)'}
        }}>
            <CardContent sx={{p:2, pb: 1}}>
                <Box sx={{display: 'flex', alignItems: 'center', mb: 2}}>
                    <Trophy/>
                    <Typography variant="h6" sx={{ml: 1}}>
                        {champ.title}
                    </Typography>
                </Box>
                <Typography color="text.secondary" sx={{mb: 1}}>
                    {champ.stage.name} — {champ.date}
                </Typography>
            </CardContent>
            <CardActions sx={{ justifyContent: 'flex-start', px: 2, pb: 2 }}>
                <Button
                    component={Link}
                    variant="contained"
                    color="primary"
                    to={`/stages/${champ.stage.id}`}
                    sx={{mt: 2}}
                >
                    Подробнее
                </Button>
            </CardActions>
        </Card>
    )
}

export default AnnounceCard;
