
import { ReactElement } from 'react';
import { Card, CardContent, CardMedia, Divider, Stack, Typography } from '@mui/material';
import { DataGrid } from '@mui/x-data-grid';

type EducationDetailProps = {
    
}



const EducationDetail = (): ReactElement => {
    return(
        <Card
      sx={(theme) => ({
        boxShadow: theme.shadows[4],
        width: 1,
        height: 'auto',
      })}
    >
        <CardContent
                sx={{
                  flex: '1 1 auto',
                  padding: 0,
                  ':last-child': {
                    paddingBottom: 0,
                  },
                }}
              >
                <Stack direction="row" justifyContent="space-between" alignItems="center" flexWrap="wrap">
                    <Typography variant="subtitle1" component="p" minWidth={100} color="text.primary">
                        {'Video'}
                    </Typography>
                </Stack>
                <Divider />

                <Stack
                    bgcolor="background.paper"
                    borderRadius={5}
                    width={1}
                    boxShadow={(theme) => theme.shadows[4]}
                    height={1}
                >
                    <CardMedia
                        component='video'
                        className={''}
                        image={"https://www.youtube.com/watch?v=2yJgwwDcgV8&list=RD2yJgwwDcgV8&start_radio=1"}
                        autoPlay
                    />



                </Stack>



              </CardContent>

        
    </Card>
    )

}

export default EducationDetail;