import { Box, Card, CardContent, Divider, LinearProgress, Stack, Typography } from '@mui/material';

type EducationVideoColumnCardProps = {
    title: string;
    category: string;
    progressValue: number;

}



type EducationVideoCategoryColumnCardProps = {
    category: string;
    videos: Array<EducationVideoColumnCardProps>;
}

const EducationVideoCategoryColumnCard = ({category, videos}:EducationVideoCategoryColumnCardProps ) => {
    return(
        <Stack direction='column'>
            <Typography variant='h4'>
                {category}
            </Typography>
            {videos.map(({title, category, progressValue}) => <EducationVideoColumnCard title={title} category={category} progressValue={progressValue} />)}
        </Stack>
    )
}

const EducationVideoColumnCard = ({title, category, progressValue}: EducationVideoColumnCardProps ) => {
    return (
        <Card
        sx={{
            mb:1,
            borderStyle:'hidden',
            borderWidth: 1,
            boxShadow: 1
        }}
        >
            <CardContent
              sx={{padding: '1px', paddingBottom: '1px'}}
            >
                <Typography variant="caption" component="div">
                    {title}
                </Typography>
                <LinearProgress variant="determinate" value={progressValue} />
            </CardContent>
        </Card>
    )
    // return (
    //     <Stack direction='column'>
    //         <Typography variant='h6' color="text.primary">
    //             {title}
    //         </Typography>
    //         <Typography variant='caption' color="text.primary">
    //             {category}
    //         </Typography>
    //         <LinearProgress variant="determinate" value={progressValue} />
            
    //     </Stack>
    // )
}

type EducationTableProps = {
    videosByCategories: {
        category: string;
        videos: {
            id: number;
            title: string;
            progressValue: number;
            status: string;
        }[];
    }[]
}


export default EducationVideoCategoryColumnCard;
