import * as React from 'react';
import Card from '@mui/material/Card';
import { List, ListItemAvatar } from '@mui/material';
import { ListItem } from '@mui/material';
import { ListItemText } from '@mui/material';
import PeopleIcon from '@mui/icons-material/People';
import SportsIcon from '@mui/icons-material/Sports';
import MapIcon from '@mui/icons-material/Map';
import EventIcon from '@mui/icons-material/Event';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';

export default function MatchInfo() {
    return (
        <Card sx={{ maxWidth: 400 }}>
            <CardContent>
                <Typography sx={{ fontSize: 24 }} component="div">
                    King of the Court!
                </Typography>
                <List>
                    <ListItem>
                        <ListItemAvatar>
                            <SportsIcon />
                        </ListItemAvatar>
                        <ListItemText primary="Sport" secondary="Tennis" />
                    </ListItem>
                    <ListItem>
                        <ListItemAvatar>
                            <PeopleIcon />
                        </ListItemAvatar>
                        <ListItemText primary="Participants" secondary="John Smith, Bob Williams, and Candice Baker" />
                    </ListItem>
                    <ListItem>
                        <ListItemAvatar>
                            <MapIcon />
                        </ListItemAvatar>
                        <ListItemText primary="Location" secondary="Athletic Center - 55 Harbord St, Toronto, ON M5S 2W6" />
                    </ListItem>
                    <ListItem>
                        <ListItemAvatar>
                            <EventIcon />
                        </ListItemAvatar>
                        <ListItemText primary="Time" secondary="1:00PM Tomorrow (January 13th)" />
                    </ListItem>
                </List>
            </CardContent>
            <CardActions>
                <Button size="Medium">Participate</Button>
            </CardActions>
        </Card>
    );
}