import {
    TimelineConnector,
    TimelineContent,
    TimelineDot,
    TimelineItem,
    TimelineOppositeContent,
    TimelineSeparator
} from "@mui/lab";
import {CircularProgress, Typography} from "@mui/material";

const InProgressTimeLine = ({date, primaryLabel, secondaryLabel, position}) => {
    return (
        <TimelineItem sx={{minHeight: 90}}>
            <TimelineOppositeContent
                sx={{m: 'auto 0'}}
                variant="body2"
                color="text.secondary"
            >{date}</TimelineOppositeContent>
            <TimelineSeparator>
                <TimelineDot color="primary">
                    <CircularProgress color={'inherit'} size={40}/>
                </TimelineDot>
                {position !== 'end' && <TimelineConnector/>}
            </TimelineSeparator>
            <TimelineContent sx={{py: '12px', px: 2}}>
                <Typography variant="h6" component="span">{primaryLabel}</Typography>
                <Typography variant="body2" color={'gray'}>{secondaryLabel}</Typography>
            </TimelineContent>
        </TimelineItem>
    )
}

export default InProgressTimeLine