import {
    TimelineConnector,
    TimelineContent,
    TimelineDot,
    TimelineItem,
    TimelineOppositeContent,
    TimelineSeparator
} from "@mui/lab";
import DoneIcon from "@mui/icons-material/Done";
import {Typography} from "@mui/material";

const DoneTimeLine = ({date, primaryLabel, secondaryLabel, position}) => {
    return (
        <TimelineItem>
            <TimelineOppositeContent
                sx={{m: 'auto 0'}}
                align="right"
                variant="body2"
                color="text.secondary"
            >{date}</TimelineOppositeContent>
            <TimelineSeparator>
                <TimelineDot color={'success'}>
                    <DoneIcon/>
                </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 DoneTimeLine